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INTRODUCTION 

Getting Started 


Dreamweaver is a professional visual editor for creating and managing Web sites 
and pages. With Dreamweaver, it’s easy to create and edit cross-platform, cross¬ 
browser pages. 

Dreamweaver provides advanced design and layout tools, as well as making it easy 
to use Dynamic HTML features such as animated layers and behaviors without 
writing a line of code. Browser-targeting checks your work for potential problems 
on all popular platforms and browsers. Macromedia’s Roundtrip HTML 
technology imports HTML documents without reformatting the code—and you 
can set Dreamweaver to clean up and reformat HTML when you want to. 

Dreamweaver is fully customizable. You can create your own objects and 
commands, modify menus and keyboard shortcuts, and even write JavaScript 
code to extend Dreamweaver with new behaviors and property inspectors. 
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System requirements 

The following hardware and software is required to run Dreamweaver. 

For Microsoft Windows: 

• An Intel Pentium processor or equivalent, 120 MHz or faster, running 
Windows 95, Windows 98, or Windows NT version 4.0 or later 

• 32 MB of random-access memory (RAM) plus 20 MB of available disk space 

• A color monitor capable of 800 x 600 pixel resolution 

• A CD-ROM drive 

For the Macintosh: 

• A Power Macintosh, running Mac OS 8.1 or later 

• 32 MB of random-access memory (RAM) plus 20 MB of available disk space 

• A color monitor capable of 800 x 600 pixel resolution 

• A CD-ROM drive 

Installing Dreamweaver 

Follow these steps to install Dreamweaver on either a Windows or a 
Macintosh computer. 

To install Dreamweaver: 

1 Insert the Dreamweaver CD into the computer’s CD-ROM drive. 

2 Choose from the following options: 

• In Windows, choose Start > Run. Click Browse and choose the Setup.exe 
file on the Dreamweaver CD. Click OK in the Run dialog box to begin 
the installation. 

• On the Macintosh, double-click the Dreamweaver Installer icon. 

3 Follow the on-screen instructions. 

4 If prompted, restart your computer. 
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Learning Dreamweaver 

The Dreamweaver package contains a variety of resources to help you learn the 
program quickly and become proficient in creating your own Web sites and pages. 
These resources include online HTML help pages that appear in your browser, 
Show Me movies, a tutorial, and a printed book. In addition, the Dreamweaver 
Web site is updated regularly. 

Guided Tour and Show Me movies 

The Show Me movies in Dreamweaver Help provide an animated introduction to 
some of the main features of Dreamweaver. The Guided Tour includes all the 
Show Me movies in sequence. 

You can also view individual Show Me movies in their respective overview 
sections. In the Help table of contents, the following icon indicates that a topic 
contains a Show Me movie: 



Show Me movies require the Shockwave plugin, which is included on the 
Dreamweaver CD. If you purchased your copy of Dreamweaver electronically, 
you can download the latest Shockwave plugin from the Macromedia Web site at 
http: / / www.macromedia. com/shockwave/download/. 

Dreamweaver Help 

The Dreamweaver HTML Help pages provide comprehensive information about 
all Dreamweaver features. These browsers are strongly recommended for viewing 
Dreamweaver Help: 

• In Windows: Netscape Navigator 4.0 and later or Microsoft Internet Explorer 
4.0 and later 

• On the Macintosh: Netscape Navigator 4.0 and later (Internet Explorer for 
Macintosh is not recommended because it cannot play the Show Me movies) 

If you use a 3.0 browser, all the content is still accessible, but some features (such 
as Search) will not work. 

Dreamweaver Help makes extensive use of JavaScript. Make sure that JavaScript is 
enabled in your browser. If you plan to use the search feature, make sure that Java 
is enabled as well. 
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Dreamweaver Help includes the following components: 

The table of contents enables you to see all information organized by subject. 
Click top-level entries to view subtopics. 

The index, like a traditional printed index, can be used to find important terms 
and go to related topics. 

Search allows you to find any character string in all topic text. The search feature 
requires a 4.0 browser with Java enabled. 

Note: After clicking Search, a Java security window may appear, asking for permission to 
read files on your hard disk. You must grant this permission for the search to work. The 
applet does not write anything to your hard disk, nor does it read any files outside the 
HTML Help Pages. 

• To search for a phrase, simply type the phrase in the text field. 



• To search for files that contain two keywords (for example, layers and styles ), 
separate the search terms with a plus (+) sign. 
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Context-sensitive help Provides a Help button in each dialog box, or a question 
mark icon in inspectors, windows, and palettes, that opens a relevant help topic. 

Click here to open Help. 
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Dreamweaver Help's navigation bar provides buttons you can click to move 
through topics. The Previous and Next buttons move to the previous or next topic 
in a section (following the topic order listed in the table of contents). 
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Dreamweaver Tutorial 

The Dreamweaver Tutorial is the best place to start if you don’t have very much 
experience in developing Web sites. By working through the tutorial, you’ll learn 
how to edit a sample Web site with some of Dreamweaver’s most useful and 
powerful features. The tutorial is in both Dreamweaver Help and the Using 
Dreamiveaver book. 

Dreamweaver user's guide (printed book) 

The Using Dreamweaver book provides a printed alternative to Dreamweaver 
Help. Certain reference topics about program options are not included in the 
printed book; see the Help pages for information on those topics. 


Extending Dreamweaver manual 

The Extending Dreamweaver book and Help pages provide information for 
JavaScript and C developers on the Dreamweaver Document Object Model and 
the APIs (application programming interfaces) that allow you to create objects, 
commands, property inspectors, behaviors, and translators. 

Dreamweaver Support Center 

The Dreamweaver Support Center Web site is updated regularly with the latest 
information on Dreamweaver, plus advice from expert users, information on 
advanced topics, examples, tips, and updates. Check the Web site often for the 
latest news on Dreamweaver and how to get the most out of the program at 
http; / / www.macromedia. com / support/dream weaver/. 


Getting Started 13 










Where to start 

This guide includes information for readers at a variety of levels. To get the most 
out of the documentation, start by reading the parts that are most relevant to your 
level of experience. 

For HTML novices: 

1 Begin by viewing the Guided Tour. 

2 Next, work through the Dreamweaver Tutorial. 

3 Progress through “Dreamweaver Basics” on page 61, “Creating Sites and 
Documents” on page 75, “Linking and Navigation” on page 109, and “Site 
Management” on page 139. 

4 To learn about formatting text and including images in your pages, read 
“Formatting Text” on page 177 and “Inserting Images” on page 199. 

That’s all you really need to begin producing high-quality Web sites, but when 
you’re ready to learn how to use more advanced layout and interaction tools, you 
can proceed through the rest of the book in order. You may want to skip 
“Customizing Dreamweaver,” at least at first. 

For experienced Web designers who are new to Dreamweaver: 

1 Begin by working through the Dreamweaver Tutorial to learn the basics of 
using Dreamweaver. 

2 Read “Dreamweaver Basics” on page 61 for a further overview of the 
Dreamweaver user interface. 

3 Although much of the material in “Creating Sites and Documents” on page 75 
and “Linking and Navigation” on page 109 is probably familiar to you, skim 
those chapters to see how these familiar concepts are implemented in 
Dreamweaver; pay particular attention to “Creating a local site” on page 78. 
Then read “Site Management” on page 139. 

4 “Formatting Text” on page 177 and “Inserting Images” on page 199 provide 
useful information on the details of using Dreamweaver to create basic 
HTML pages. 

5 Read the overview at the beginning of each subsequent chapter to determine 
whether its topics are of interest to you. 
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For experienced Web designers who are familiar with Dreamweaver 2: 

1 Begin by reading “What’s new in Dreamweaver 3” on page 16. Follow the 
cross-references from that section to sections covering new Dreamweaver 
features. Be sure to read these sections about important new features: 

• “About the History palette” on page 97 

• “Editing an HTML tag in the Document window” on page 336 

• “Formatting text using HTML styles” on page 184 

• “Synchronizing the files on your local and remote sites” on page 153 

• “About Design Notes” on page 172 

• “Cleaning up Microsoft Word HTML” on page 348 

2 You may want to skim “Dreamweaver Basics” on page 61 to learn about new 
aspects of the Dreamweaver user interface. 

3 In addition, if you’re interested in customizing and extending Dreamweaver, 
read “Customizing Dreamweaver” on page 383. 


Typographical conventions 

The following typographical conventions are used in this guide: 

• Code font indicates HTML tag and attribute names as well as literal text used 
in examples. 

• Italic code font indicates replaceable items (sometimes called metasymbols) 
in code. 

• Bold roman text indicates text for you to enter verbatim. 
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What's new in Dreamweaver 3 


The new features in Dreamweaver 3 enhance HTML editing; improve site 
management; let you add elements such as special characters, navigation bars, 
and image maps; streamline your workflow; and allow you to customize and 
extend Dreamweaver. 

Editing HTML 

The Quick Tag Editor lets you quickly modify, add, or remove an HTML tag 
without leaving the Document window. See “Editing an HTML tag in the 
Document window” on page 336. 

HTML styles allow you to define styles using cross-browser standard HTML 
character markup (such as the B and FONT tags) rather than Cascading Style Sheets. 
(The Dreamweaver 2.0 Styles palette is now called the CSS Styles palette.) See 
“Formatting text using HTML styles” on page 184. 

The improved HTML Source inspector lets you display line numbers, select entire 
lines of code from the margin, and drag and drop HTML selections. You can also 
dock the HTML Source inspector with other floating palettes. See “Using the 
HTML Source inspector” on page 335. 

Enhanced third-party tag model lets you specify that Dreamweaver should ignore 
the contents of certain types of third-party tags, such as Microsoft Active Server 
Pages (ASP) and ColdFusion tags. You can easily add support for other third-party 
tags. Also, new HTML rewriting options let you control whether Dreamweaver 
encodes certain characters in certain contexts. See “Setting HTML Rewriting 
preferences” on page 343 and “Avoiding rewriting third-party tags” on page 405. 

Add/Remove Netscape Resize Fix allows you to automatically add JavaScript to fix 
problems with CSS layers when resizing a browser window. See “Setting Layer 
preferences” on page 239. 


Managing sites 

Synchronize Files Allows you to quickly synchronize your local copy of a site with 
the version on the server, ensuring that the latest version of each file is in both the 
local and remote sites. You can also set this feature to delete extraneous files. See 
“Synchronizing the files on your local and remote sites” on page 153. 

Easy access to the check in/check out system allows you to get, put, check in, and 
check out files directly from the Document window. See “Using the check in/ 
check out system” on page 147. 

Save Files Before Putting prompts you to save an unsaved file before transferring it 
to your remote server. See “Setting Site FTP preferences” on page 146. 

URLs in Flash movie files are now editable in Dreamweaver; the site map displays 
all the links in Flash files, and the link checker can check those links. 
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Creating and editing objects and page elements 

Character objects provide a collection of commonly used special characters and 
symbols (such as ©, ®, and ™) that are easily accessible from the Object palette. 
See “Using the Object palette” on page 69. 

Frame objects let you create predefined framesets quickly and easily. See “Inserting 
a predefined frameset” on page 267. 

Other objects allow you to easily add navigation bars, jump menus, e-mail 
links, dates, and new media objects (such as Flash 4 movies, and Shockwave 7 
movies, and Generator objects) to your documents. See “Using the Object 
palette” on page 69, “Linking and Navigation” on page 109, and “Inserting 
Media” on page 281. 

Inline image maps allow you to add and resize hotspots, change links and targets, 
and apply behaviors, all without leaving the Document window. See “Creating 
image maps” on page 211. 
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Streamlining your workflow: Integration and communication 

Design Notes allow you to attach notes to a file so you can track file changes and 
communicate about development issues with other team members. You can even 
add Design Notes to images in Fireworks and then read and edit those notes in 
Dreamweaver. See “About Design Notes” on page 172. 

Import and Clean Up Word HTML allow you to import HTML files generated by 
Microsoft Word; the Clean Up feature strips out irrelevant XML code and styles, 
removes proprietary tags, fixes invalid HTML, and formats the code according to 
your preferences. See “Cleaning up Microsoft Word HTML” on page 348. 

The History palette keeps track of every action you perform. It lets you undo steps, 
repeat steps, and copy steps to the Clipboard and paste them to repeat actions in 
other documents. You can even save steps as a command that automatically 
appears in the Commands menu. See “About the History palette” on page 97. 

Repeat provides a quick way to do simple repetitive tasks. See “Repeating steps” 
on page 99. 

Import Table Data allows you to automatically create tables out of data that you’ve 
exported into delimited files from applications like Microsoft Excel or Microsoft 
Access. See “Importing table data” on page 218. 

Insert Fireworks HTML imports the HTML source code and images that result 
from slicing an image using Fireworks. You can launch Macromedia Fireworks 
from within Dreamweaver and edit a source PNG image. See “Working with 
Fireworks HTML files” on page 209. 

Launch and edit media by double-clicking any image or media file in the Site 
window; each file type is opened in an appropriate external editor. See “Using an 
external image editor” on page 205. 

Enhanced Macintosh compatibility provides a better user experience on the 
Macintosh. Dreamweaver now supports Navigation Services, renders images using 
QuickTime, and offers a host of other enhancements. 


Customizing and extending Dreamweaver 

Customizable menus and shortcuts enable you to edit, customize, and expand 
Dreamweaver menus and keyboard shortcuts. See “Customizing Dreamweaver 
menus” on page 386. 

Dreamweaver extensibility provides 300 new API functions to allow you to create 
your own JavaScript extensions to Dreamweaver, including custom floating 
palettes and attribute translators. See the Extending Dreamiveaver manual. 
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HTML and Web technologies resources 

The following are some useful resources available on the Web: 

The HTML 4.0 specification (http://www.w3.org/TR7REC-html40/) is The 
official specification for HTML from the World Wide Web Consortium. 

The Cascading Style Sheets, level 1 specification (CSS1) (http://www.w3.org/TR/ 
REC-CSS1) is the official specification for style sheets from the World Wide 
Web Consortium. 

Index DOT Html (http://www.blooberry.com/indexdot/html/) is a comprehensive 
listing of HTML tags, attributes, and values, as well as their compatibility with 
the various browsers. 

Web Review's Style Sheets Reference Guide (http://webreview.com/guides/style/) 
explains what styles are and which browsers they work in. 

"CGI Scripts for Fun and Profit" (http://www.hotwired.com/webmonkey/99/26/ 
index4a.html?tw=programming) is an article from the Hotwired Webmonkey 
site on incorporating ready-made CGI (Common Gateway Interface) scripts 
into your pages. 

The CGI Resource Index (http://www.cgi-resources.com/) is a repository of all 
things related to CGI, including ready-made scripts, documentation, books, and 
even programmers-for-hire. 

The Common Gateway Interface site (http://hoohoo.ncsa.uiuc.edu/cgi/) includes 
an introduction to CGI. 

Entities Table (http://www.bbsinc.com/iso8859.html) lists the entity names used 
in ISO 8859-1 (Latin-I). 

The Dynamic HTML Events page (http://msdn.microsoft.com/workshop/author/ 
dhtml/reference/events.asp#om40_event) provides information about events in 
Microsoft Internet Explorer. 

Microsoft's ASP Overview pages (http://msdn.microsoft.com/workshop/server/ 
asp/ASPover.asp) provide information about Active Server Pages (ASP). 

Sun's JSP page (http://java.sun.com/products/jsp/) provides information about 
JavaServer Pages (JSP). 

The PHP pages (http://www.php.net/) provide information about PHP: 
Hypertext Preprocessor (PHP). 

Allaire's ColdFusion product page (http://www.coldfusion.com/Products/ 
ColdFusion/) provides information about ColdFusion. 

The XML.com site (http://www.xml.com) provides information about XML. 
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CHAPTER 1 

Dreamweaver Tutorial 


This tutorial shows you how to use Dreamweaver to define a local site and to 
create and edit Web documents. Use this tutorial to learn the basic skills you’ll 
need to develop a Web site and to learn about some of the new features of 
Dreamweaver 3. 

In this tutorial, you will create a Web site for a fictitious company, Scaal Coffee, a 
gourmet coffee business. 

While visiting Scaal’s Web site, customers can read about the company, view the 
weekly specials, and browse through the product pages of Scaal’s online catalog. 
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Along the way, you’ll learn how to perform the following tasks: 

• Define a local site 

• Create a document 

• Use layers to lay out a page 

• Convert layers to tables 

• Attach a behavior to an image 

• Import a Microsoft Word HTML document 

• Format text using HTML styles 

• Create a site map 

• Create links 

• Apply a template 

• Create a jump menu 

Note: This tutorial demonstrates some features that are supported only in 4.0 or 
later browsers. 

Take a guided tour of Dreamweaver 

Before you get started, watch the Guided Tour movies in Dreamweaver Help to 
familiarize yourself with Dreamweaver’s features. 

1 In Dreamweaver, choose Help > Using Dreamweaver. 

2 In the Contents list in the left frame, click Getting Started, and then click 
Learning Dreamweaver. 

3 Click a movie title. 

4 Close the browser when you finish. 
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Preview the completed Web site 

Next, view the completed Web site to get an idea of what you’ll be 
working toward. 

1 Launch Dreamweaver. 

2 In Dreamweaver, choose File > Open. In the file browsing dialog box, navigate 
to the Dreamweaver application folder, open the Tutorial folder, and then the 
Scaal_site folder. 

3 In the Scaal_site folder, select scaal_home.html, and then click Open to open 
the Scaal home page in the Document window. 

Do not edit this page. You will create your own version of this page. 

4 Choose File > Preview in Browser and select a browser with which to view the 
Scaal home page. (Use a 4.0 browser to view this site.) 


c 

A 

A 

L 


Welcome to the Scaal 


our story 


Coffee Web site, home of the 
finest coffee gifts in the world. 


products 


this week 


Take a moment to view our many 
products . We offer fine roasted 
products as well as items to wear 
and items for the office. 

Scaal has been serving fine coffee 
connoisseurs like you for over 50 
years. We follow a roasting 
process that produces the finest 
coffees in the world. 


Check with us often to see our 
special promotions of the week. 


brave new world coffee 



5 Move the pointer over the three items on the left side of the page (Our Story, 
Products, and This Week), and notice that the items highlight to indicate that 
they are active links. 

Click the links to explore the site. To return to the home page, click the Scaal 
logo, which is located at the top of each site page. 

6 Close the browser when you finish looking at the site. 

7 Close Dreamweaver. 
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How the tutorial files are arranged 

Both the completed and partially completed HTML files used in this tutorial 
are in the Scaal_site folder in the Tutorial folder. Images and other associated 
files for the site are in folders below the Scaal_site folder. (The complete path to 
the Scaal_site folder will vary, depending on where you have Dreamweaver 3.0 
installed.) 

Each file has a meaningful name—for example, the HTML file for the completed 
Scaal products page is named products_index.html. The partially completed 
files—which you’ll be working on—have names similar to their counterparts in 
the complete site, except they begin with DW3_; the partially completed version 
of products_index.html, for example, is called DW3_products_index.html. 


Set up site structure for the tutorial 

Before you start the tutorial, create a new folder into which you’ll transfer the 
Scaal site tutorial files. Later, you can use the Sites folder structure to store other 
sites you create. 

1 At the root level of your local disk, create a new folder and name it Sites —for 
example, C:\Sites (Windows) or Hard Drive:Sites (Macintosh). 

2 From the Dreamweaver/Tutorial folder, copy the complete Scaal_site folder 
into the Sites folder. 
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Define a local site 


Begin your site development by defining a local site for the files in the Scaal_site. 
A site is a storage location for all the documents and files belonging to a particular 
Web site. Defining a local site delineates the structure of the site you are creating 
and tells Dreamweaver where you plan to store all of the site’s files. Define a local 
site for each Web site you create using Dreamweaver. 

For this tutorial, you’ll specify the Scaal_site folder as the local site folder. 

1 Launch Dreamweaver. 

A blank document opens. 

2 Choose Site > New Site. 

3 In the Site Definition dialog box, make sure Local Info is selected in the 
Category list. 

4 In the Site Name field, type my_tutorial. 

The site name lets you easily identify and select a site from a list of sites 
you’ve defined. 

5 Click the folder icon to the right of the Local Root Folder field, navigate to the 
Sites/Scaal_site folder, and click Open. Then click Select (Windows) or click 
Choose (Macintosh). 

The Local Root Folder field updates to display the path to the local site. 



Note: The complete path to the Scaal_site folder may vary, depending on where you 
have created your Sites folder. 

6 Click OK. 
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7 Click Create when asked if you’d like to create a cache file for the site. 

Caching the files in the Scaal_site folder creates a record of existing files 
so Dreamweaver can quickly update links when you move, rename, or 
delete a file. 

The Site window now displays a list of all the folders and files in the local site 
my_tutorial. The list also acts as a file manager, allowing you to copy, paste, 
delete, move, and open files just as you would in the file finder or explorer on 
your own computer. 



8 Leave the Site window open. 

9 Click the Document window to make it active. 
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Create the Scaal site home page 

Now that you have set up a structure to store the Scaal site, you’ll create a home 
page for the site. As you build this document, you’ll add a page title, layers, 
images, text, and links; your document will contain the same design components 
as the completed Scaal home page. 

If they aren’t already open, open the following workspace components: 

• The Object palette (choose Window > Objects), which you’ll use to add objects 
to your document 

• The Property inspector (choose Window > Properties), which you’ll use to set 
properties or attributes for objects in your document 


Save your document 

Save the blank document you created when you launched Dreamweaver. 

1 Choose File > Save. 

2 In the Save As dialog box, select the Sites/Scaal_site folder to save the file in. 

3 In the File Name field, type my_scaal_home.html. 

4 Click Save. 


Dreamweaver Tutorial 27 



Define the title of the page 

Defining a page title for an HTML document helps users identify and keep track 
of a page they’re browsing. The page title appears in the browser title bar when a 
page is viewed in a browser. When a page is bookmarked, the page title appears in 
the bookmark list. If a document is created without a page title, the document 
appears in the browser with the title Untitled Document. 

1 With the Document window active, choose Modify > Page Properties to see the 
page property options. 

2 In the Title field of the Page Properties dialog box, type Scaal Gourmet Coffee. 



3 Click OK. 

The title appears in the title bar of the Dreamweaver Document window. 
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Create a page layout 

You’ll begin by opening the completed version of the Scaal home page in a 
browser so that you can refer to it while working. 

1 Choose File > Open, navigate to the Sites/Scaal_site folder, select 
scaal_home.html, and then click Open. 

2 Press FI2, to preview the page in a browser. 

The home page appears in the browser. 
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Welcome to the Scaal 


our story 


Coffee Web site, home of the 
finest coffee gifts in the world. 


products 


this week 


Take a moment to view our many 
products . We offer fine roasted 
products as well as items to wear 
and items for the office. 

Scaal has been serving fine coffee 
connoisseurs like you for over 50 
years. We follow a roasting 
process that produces the finest 
coffees in the world. 


Check with us often to see our 
special promotions of the week. 


brave new world coffee 



Leave the browser window open in the background to refer to as necessary. 

3 Click in the Document window of the scaal_home.html document, and then 
choose File > Close to close the document. 

Add layers 

Layers are ideal for creating complex page layouts, since you can easily reposition 
page elements that have been placed in layers by dragging them. You’ll lay out the 
home page using layers, and then convert the layout to a table layout so that the 
page will accurately display in both 3.0 and 4.0 browsers. 

You cannot convert layers to tables if the document being converted contains 
nested or overlapping layers. 

1 Choose Window > Layers to open the Layer palette. 

2 Make sure the Prevent Overlaps box is selected. 
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3 Click in the Document window of the my_scaal_home document to make the 
document active. 

4 Choose Insert > Layer. 

A layer is added to the document. 

5 In the Object palette’s Common panel, click the Draw Layer button. 
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6 Move the pointer to the Document window; the pointer changes into a 
drawing tool. In the space below the first layer, drag the pointer to draw 
a new layer. 

7 Repeat the actions in steps 5 and 6 to draw another layer. 

Your page should look similar to the screen below. 
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Select and manipulate a layer 

You can change the position or shape of the layers in your document. 
1 Click the border of the layer. 

Handles appear around a selected layer: 

ja_._ 


2 To resize a layer, click a layer handle, and drag the handle to the desired size. 

3 To move a layer, do one of the following: 

• Use the arrow keys. 

• Hold down Shift and use the arrow keys to move a layer five pixels in the 
direction of the arrow used. 

• Click the tab in the top left corner of the layer and drag the layer to the 
desired position. 
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Add an image 

Now you’ll insert the Scaal logo image in the document. 

1 Click anywhere in the uppermost layer. Clicking in a layer places the insertion 
point inside the layer without selecting the layer. 

An active layer with an insertion point in it looks like this: 

p_ 


2 Choose Insert > Image. 

3 In the Select Image Source dialog box, locate the Sites/Scaal_site/Images folder, 
navigate to logo_scaal.gif, and click Select (Windows) or Choose (Macintosh). 

The image appears in the layer. 
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Add the navigation images 

Now you’ll add images for navigation buttons. 

After you add the button images, add space between the graphics: add a paragraph 
return after you insert the images. 

1 Place the insertion point in the navigation layer (the bottom left layer). 

2 In the Object palette’s Common panel, click the Insert Image button. 

The Select Image Source dialog box appears. 
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3 In the Images folder of the Scaal_site, navigate to btn_ourstory_up.gif and 
then click Select (Windows) or Choose (Macintosh) to insert the image. 

The Our Story image appears in the layer. 

4 Position the insertion point after the image in the layer, and press Enter 
(Windows) or Return (Macintosh) to add space between this image and the 
next image you insert. 



5 In the Object palette, click the Insert Image button, and in the dialog box that 
appears select btn_products_up.gif, and then click Select (Windows) or Choose 
(Macintosh). 

6 Position the insertion point after the image in the layer, and press Enter 
(Windows) or Return (Macintosh). 

7 In the Object palette, click the Insert Image button, and in the dialog box that 
appears select btn_thisweek_up.gif, and then click Select (Windows) or Choose 
(Macintosh). 

Your document layout should look similar to this. 
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Name the images 

Make a habit of naming the elements in your documents. Later, when you need to 
reference or select a particular image, layer, or some other document element, 
you’ll be able to easily identify it. You’ll be referencing these images later in the 
tutorial, so name them now. 

1 In the Document window, click the Our Story image to select it. 

2 In the Image field of the Property inspector, type ourstory. 



3 Repeat these steps, selecting and naming the other two images in your 
document. Name the second image products and the third image thisweek. 


Add text to a layer 

Now you’ll add text to the remaining layer. 

In Dreamweaver, you can type content directly into a layer, or you can cut and 
paste content from another document into a layer. In this tutorial, you’ll add text 
to the layer by copying and pasting content from an existing text file to a layer. 

1 Choose File > Open; then, in the Scaal_site folder, open DW3_copy.txt. 

The DW3_copy.txt document opens in a new Dreamweaver Document 
window. DW3_copy.txt is the file you’ll copy the text from. 

2 Choose Edit > Select All to select the document text. 

3 Choose Edit > Copy to copy the text. 

4 Close the DW3_copy.txt document. 

5 In the my_scaal_home document, position the insertion point in the bottom 
right layer. 

6 Choose Edit > Paste to paste the text into the layer. 
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Format text 


You can format text in the Document window by setting properties in the 
Property inspector. First, select the text you want to format, and then apply the 
changes. You’ll change the font and size of the text. 

Before you format the text, you’ll create a couple of paragraphs. Add a paragraph 
return after the first sentence and after the second sentence. 

1 If the Property inspector isn’t open, choose Window > Properties. 

2 With the insertion point anywhere in the layer, press Control+A (Windows) or 
Command+A (Macintosh) to select all the text in the layer. 

3 In the Property inspector’s second Format pop-up menu, which currently reads 
Default Font, select Arial, Helvetica, sans-serif. 

4 In the Size pop-up menu, select 3. 

The text in your document automatically updates to reflect the changes. 

Add a background color to a layer 

You can also use the Property inspector to set the background color of a layer. 

You can select a color using the color picker, or you can type the hexadecimal code 
for a color. 

1 Click the border of the layer that contains the text to select it. (Handles appear 
around a layer when it is selected.) 

2 In the Property inspector, click the BgColor color box. 

The color palette and eyedropper icon appear. You can use the eyedropper to 
“pick up” any color in the visible work area, in addition to picking colors in the 
color palette. 

3 Move the color picker icon to the Scaal logo and click the gold that surrounds 
the letter S. 

The layer background color is updated. 
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Welcome to the Scaal Coffee web site. Home of the finest 
coffee gifts in the world. Take a moment to view our many 
Droducts. 

We offer fine roasted products as well as items to wear, and 
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roasting process that produces the finest coffees in the world. 
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Position the layers 

Now that you’ve completed the design of your page—laying it out using layers— 
you’ll convert the layers to a table layout so the page can be viewed by users with 
3.0 browsers. 

When you convert layers to a table, Dreamweaver creates table columns, rows, 
and cells to fit the layers on a page. To reduce the number of table columns, rows, 
and cells you create as you convert the document layout, align layer elements 
before converting a document. Use the Property inspector to position layers in 
a document. 

First, you’ll resize and move the layers as you design your page; then you’ll set the 
position of the two lower layers so they align at the top. 

1 Resize the top layer by dragging the layer handles in until they just surround 
the Scaal logo and the text following it. 

2 Resize the navigation layer (the bottom left layer) by dragging the layer handles 
in until they just surround the images. 

3 Move the text layer so that it is positioned next to the navigation layer. Select 
the layer, and then use the arrow keys or drag the layer by the layer tab. (The 
layers won’t overlap, because Prevent Overlap is selected in the Layer palette.) 
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our story 

Welcome to the Scaal Coffee web site. Home of the finest 

coffee gifts in the world. Take a moment to view our many 
Droducts. 

We offer fine roasted products as well as items to wear, and 
terns for the office. Scaal has been serving fine coffee 
connoisseurs like yourself for over 50 years. We follow a 
oasting process that produces the finest coffees in the world. 


products 


this week 


week. 


4 If all the layer property fields aren’t visible in the Property inspector, click the 
expander arrow in the lower right corner of the Property inspector. 
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5 Select the layer that contains the navigation images. Hold down Shift and select 
the layer that contains the text. 

Both layers are selected. 

6 In the Property inspector’s T field, type lOOpx. This precisely positions both 
layers 100 pixels from the top of the document. 
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Click anywhere in the document to deselect the layers and to see the 
layers align. 
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Convert layers to a table 

Now that you’ve laid out the page, convert the layers to a table so that the page 
will be displayed accurately in 3.0 as well as later version browsers. 

1 Choose Modify > Layout Mode > Convert Layers to Table. 

The Convert Layers to Table dialog box appears. 



2 In the Convert Layers to Table dialog box, under Table Layout make sure that 
Smallest: Collapse Empty Cells and Use Transparent GIFs are selected. 

3 Under Layout Tools, make sure that Prevent Layer Overlaps is selected. 

4 Click OK. 

The layers are now converted to a table. 



Note Dreamweaver sets the space between the table columns and rows using 
transparent GIFs. After converting layers to a table, you'll see the file tranparent.gif in the 
root level of your site folder. Don't move this file to your Images folder; if you do, you'll 
see broken image icons when you view your page in a browser. 

5 Close the Layer palette. 

6 Save your file. 
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Create rollover images 

A rollover image is an image whose display changes when the pointer is “rolled” 
over it. You create a rollover image by attaching a behavior to an image. 

A behavior is a combination of an event and an action. Events are situations that 
trigger actions. For example, an event called onClick can occur when the user clicks 
a button, or an event called onMouseOver can occur when the mouse pointer passes 
(“rolls”) over an object. Actions are pieces of prewritten JavaScript code that 
perform specific tasks, such as opening a browser window, playing a sound, or 
stopping a Shockwave movie. 

When attaching a behavior to a page element, you specify both an action and the 
event that triggers it. Dreamweaver offers several predefined actions that you can 
attach to page elements. 

In this part of the tutorial, you’ll apply Swap Image actions to the Our Story, 
Products, and This Week images so that the images are highlighted when 
the mouse passes over them (that is, when the onMouseOver event occurs). 

For example, when the Our Story image appears on the page normally, it 
looks like this: 


our story 


After you’ve defined a behavior that includes the Swap Image action during the 
onMouseOver event, the Our Story image will look like this (the identical image 
with a different background color) when the mouse passes over it: 


our story 


You’ll continue working on the home page file to attach behaviors to the 
navigation images on your page. Then you’ll preview the page in a browser to test 
the behaviors. 

1 In the Document window, click the Our Story image to select it. 

2 Choose Window > Behaviors or press F8 to open the Behavior inspector, which 
lists all behaviors defined for a selected element. 
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3 In the Events For pop-up menu, 3.0 and Later Browsers should already be 
displayed. If it is not, select it. 

4 Add a new action to the list by clicking the plus (+) button and choosing Swap 
Image from the pop-up menu. 

The Swap Image dialog box appears. In the Images list, you’ll see a list of all 
images on the page, with the Our Story image selected. This is the original 
image, which will be replaced with a highlight image when the mouse pointer 
passes over it. 



5 Click Browse to navigate to the Scaal_site/lmages folder, select 

btn_ourstory_over.gif, and then click Select (Windows) or Choose (Macintosh) 
to select the image. 

This image replaces the original image during the onMouseOver event. 



6 Accept the default settings for preloading and restoring images. 

The Preload Images option loads the swap image into the browser’s cache as the 
page loads, so that when the user first moves the mouse pointer over the Our 
Story image, there is no noticeable pause before the highlight image appears. 

The Restore Images onMouseOut option automatically assigns the Swap Image 
Restore action to the onMouseOut event for this image. This returns the image 
to its original state when the user moves the mouse pointer away from it. 
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7 Click OK to close the Swap Image dialog box and apply the changes you 
just made. 

The Behavior inspector now includes the events and actions you just defined 
for the image. The onMouseOver event appears with the Swap Image action; 
above it is the onMouseOut event with the Swap Image Restore action. (This 
behavior was defined when you accepted the default options in the Swap Image 
dialog box.) 
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8 Repeat steps 4 to 7 to attach Swap Image actions and onMouseOver events to the 
Products and This Week images: 

• Select the Products image. Then in the Swap Image dialog box, set the source 
of the Products swap image to btn_products_over.gif. 

• Select the This Week image. Then in the Swap Image dialog box, set the source 
of the This Week swap image to image btn_thisweek_over.gif. 

9 Close the Behavior inspector. 

10 Press F12 to see your document in your default Web browser. 

You do not have to save a document before you preview it. All browser-related 
functions work while you preview a document. 

11 Move the mouse pointer over the Our Story, Products, and This Week images 
to see how they change. 

12 When you finish previewing the file, close the browser window. 

13 Return to Dreamweaver and choose File > Save to save the changes you made 
to the home page. 

Now, you’ll start creating the files your home page will link to. 
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Import a Word HTML document 

The tutorial file for the Our Story page contains a document that was created in 
Microsoft Word and saved as an HTML document. You’ll import this document 
into Dreamweaver, and then clean up any nonstandard HTML code in the 
document using a new Dreamweaver feature called Clean Up Word HTML. 

The Clean Up Word HTML feature provides options for cleaning up or fixing 
HTML tags, defining CSS (Cascading Style Sheets) elements, setting a page 
background color, removing Word-specific markup tags, and converting Word 
font sizes and headings to HTML size attributes. 

1 With the my_scaal_home page still open, choose File > New to open a new file. 

2 Choose File > Import > Import Word HTML to import a Word 
HTML document. 

3 In the Select Word HTML File to Import dialog box, navigate to 
DW3_ourstory_word.html, and then click Select (Windows) or Choose 
(Macintosh) to select the Word HTML file. 

You are prompted to save your document. 
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4 Click OK. 


The Our Story document opens in the background, and the Clean Up Word 
HTML dialog box appears in front of the document. 



For the purpose of this tutorial, you’ll accept the default settings in the Clean 
Up Word HTML dialog box. These options set the background color of the 
document to white, retain much of the current formatting, and clean up the 
HTML coding in the file. 

5 In the Clean Up Word HTML dialog box, all of the options on the Basic tab 
should be selected by default. Make sure they are all selected, and click OK. 

The Clean Up Word HTML log appears, detailing the results of the cleanup. 



6 Click OK. 

You see a blank document. This is the new document you created before you 
imported the Word HTML document. The imported document is behind the 
blank document. 

7 Close the blank document. 

8 Click in the Our Story document to make it the active window. 

9 Choose File > Save As to save the Our Story document; name it my_ourstory. 

Notice that the Our Story document retains the table formatting and font 
attributes of the original Word HTML file. 
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Format text using HTML styles 

Now that you’ve imported the Our Story document, you’ll add formatting 
changes to the text. An easy way to apply formatting to a document is by using 
HTML styles. An HTML style consists of one or more HTML tags; it can include 
colors, fonts, size, and so on. You can create HTML styles to apply to an entire 
paragraph or to apply to selected text. Once you create an HTML style, you can 
apply it to any page in the current site. 

Unlike CSS styles (which are styles that adhere to the Cascading Style Sheets 
specification), HTML style formatting affects only text that you apply it to, or 
text that you create using a selected HTML style. If you change the formatting of 
an HTML style you have created, text that was originally formatted with that style 
is not updated. 

Apply HTML styles 

In this tutorial, you’ll use an HTML style to format text in the Our Story 
document. 

1 Choose Window > HTML Styles. The HTML Style palette appears. 
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Notice that the styles in the palette are for the my_tutorial site. There are three 
items in the palette: 

• The first two items are Dreamweaver commands, Clear Selection Style and 
Clear Paragraph Style. Use these commands to clear existing styles from text 
you’ve selected in your document. 

• The other item is an HTML paragraph style named body, created for you to use 
in this tutorial. 

2 Make sure the Apply option is selected in the lower left corner of the HTML 
Style palette. 

3 In the my_ourstory document, place the insertion point in the first paragraph. 
You can place the insertion point anywhere within a paragraph to apply a style 
to a paragraph. 

4 In the HTML Style palette, click the body style. 

The text in the first paragraph is reformatted in the new style. 

5 Apply the body style to other paragraphs in the document. 
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Create HTML styles 

Next, you’ll create an HTML style to add emphasis to the word Scaal in 
the document. 

1 Click the New Style icon at the bottom of the HTML Style palette. 
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The Define HTML Style dialog box appears. 
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2 In the Name field, type scaal. 

3 For Apply To, select Selection. 

This applies the style to a selected range of text rather than a whole paragraph. 

4 For When Applying, leave the default setting, Clear Existing Style, which clears 
any styles applied to the selected text when you apply the new style. 

5 For Font Attributes, select the desired attributes. Here are some suggestions: 

• Font: Arial, Helvetica, sans-serif 

• Size: 3 

• Color: #CC9933 (or use the color picker to select a gold color) 

• Style: click Other, and then select Emphasis 
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6 Click OK. 


The new style is added to the HTML Style palette. Notice the a that precedes 
the Scaal style: this icon identifies a style as a selection style rather than a 
paragraph style. 
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When applying a style to a selection, you must select the range of text that you 
want to reformat. 

7 In the Document window, select the word Scaal in the first paragraph. 

8 Select the scaal style in the HTML Style palette. 

The text displays the new style in the document. 

SCAAL 

9 Apply the scaal style to a few more selections, and then close the HTML 
Style palette. 

10 Choose File > Save to save the changes you made to the my_ourstory 
document. 

11 Choose File > Close to close the document. 
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Create a visual map of your site 

Use the Dreamweaver Site Map option to provide a high-level visual 
representation of the structure of a local site. You can also use the Site Map view to 
add new files to the site; to add, remove, and change links; and to create a graphic 
file of the site that you can export to and print from an image editing application. 

In the Site Map window, the home page for a site always appears at the top of a 
site map; below the home page you can see which files the home page links to. 

You’ll set DW3_scaal_home.html as the home page for the my_tutorial site. 

This page is similar to the home page you created. (It’s essentially the same as 
the my_scaal_home document, but images and text formatting have already 
been added.) 

There are a number of ways to define a site home page. The easiest way to set a 
home page is by using the context menu. 

1 Click the title bar of the Site window if visible, to make it active, or choose 
Window > Site Files. 

2 In the Site window, in the Local Folder list, locate the DW3_scaal_home.html 
file. Right-click (Windows) or Control-click (Macintosh) the icon for the 
DW3_scaal_home.html file. 

3 From the context menu, choose Set as Home Page. 

4 Click the Site Map icon in the top left area of the Site window. 
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The Site window now appears with two views of your local site: on the left is a site 
map, which graphically represents the current structure of the Scaal site (with 
DW3_scaal_home.html as the home page), and on the right is a list of the local 
folder’s contents. 



The DW3_scaal_home page currently has no links. You’ll add links to this page in 
the next section of this tutorial. 

Leave the Site window open for now, so you can see how the site map updates as 
you add links to the home page. 


Create links 

Images on the left side of the Scaal home page guide visitors to specific pages in 
the Scaal site. You’ll add links from the Our Story, Products, and This Week 
images to their corresponding pages. 

You’ll see that there are a number of ways to create links using Dreamweaver. First, 
you’ll add a link from the Our Story image to the Our Story page using the 
Property inspector. 

1 In the Site window, double-click the icon for the DW3_scaal_home.html file 
in either panel. 

The DW3_scaal_home.html file opens. 

2 In the Document window, click the Our Story image to select it. 

Don’t double-click the image, or Dreamweaver will open the Select Image 
Source dialog box. 
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3 Choose Window > Properties to open the Property inspector if it isn’t 
already open. 

The Image Property inspector displays information about the selected image. 
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Note: The Link field contains a number sign (#), created when you attached the Swap 
Image behavior to the image. Don't remove the number sign; it will be replaced with the 
file name of the document you link to. 


4 In the Property inspector, click the folder icon to the right of the Link field. 

5 In the Select File dialog box, browse to my_ourstory.html, and click Select 
(Windows) or Choose (Macintosh) to select the file. 

The file name appears in the Link field of the Property inspector. Now 
you’ll add a link to the Products image using the Property inspector and the 
Site window. 

6 Click the title bar of the Site window to make it active, or choose Window > 
Site Files. Resize your Document window, if necessary, so that you can position 
the left side of the Document window and the Site window side by side. 
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7 In the Document window, click the Products image to select it. 
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8 In the Property inspector, drag the Point-to-File icon (located next to the Link 
field) to the Site window, and point to the file DW3_products_index.html. 

The file name appears in the Link field in the Property inspector for the 
products image. 
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Click the Site Map icon in the Site window. The site map updates to reflect the 
link you added. 
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A plus (+) sign next to any file in the site map indicates that the file contains 
links to other documents. Click the plus sign to expand the site map tree 
to display the associated files; click the minus (-) sign to collapse the site 
map view. 

Next, you’ll change a link using the context menu. 

9 In the Document window, right-click (Windows) or Control-click (Macintosh) 
the This Week image and choose Change Link. 

This image is linked to a behavior that swaps the image displayed when a users 
moves the pointer over the image. You’ll change the link so that a file opens 
when a user clicks the image. 
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10 In the Select File dialog box, browse to DW3_thisweek.html and click Select 
(Windows) or Choose (Macintosh) to select the file to open. 

Notice that the Property inspector’s Link field updates to show the linked file’s 
name. Now you’ll create a link from text. 

11 In the Dreamweaver document, select the word products in the second 
paragraph. 

12 Right-click (Windows) or Control-click (Macintosh) and choose Make Link 
from the context menu. 

13 In the Select File dialog box, browse to DW3_products_index.html and click 
Select (Windows) or Choose (Macintosh) to select the file. 

14 Choose File > Save to save all the changes you’ve made to the home page. 

15 Choose File > Close to close the page. 

Create a template 

You can use templates to create documents that have a common structure and 
appearance. Templates are useful when you want to make sure that all of the pages 
in a site share certain characteristics. 

Once you apply a single template to a group of pages, you can edit information on 
the group of pages by editing the template and then reapplying it to those pages. 
While elements unique to each page (such as text describing an item for sale) 
remain unchanged, common template elements (such as navigation bars) are 
updated on all of the pages that use the template. 

The Scaal products page links to several product pages that describe products 
Scaal offers for sale. You’ll use an existing product page to create a template. 
Using a template ensures that your product pages will have an identical layout 
and format. 

In this section, you’ll create a template from an existing product page and then use 
the template to create new product pages. 
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View a product page 

Begin by viewing the Scaal compact disc product page in a browser. 

1 In the Site window, in the Local Folder list, locate the icon for the 
product_cd.html file, and then double-click the icon to open the file in 
Dreamweaver. 

2 Press F12 to preview the page in a browser window. 
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brave new world coffee 





our story 


products 


Scaal Sound 

Our very own coffee house collection, featuring 
poetry slams, soulful vocals and a generous 
helping of the blues. 

price: $ 12.95 


3 Close the browser when you finish viewing the page. 

4 Close the products_cd.html file. 
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Create the template 

You’ll create a template from the tutorial version of the Scaal compact disk 
product page. You’ll then use this template to create additional product pages. 

1 In the Site window, in the Local Folder list, double-click the icon for 
DW3_products_cd.html to open the file. 

2 Choose File > Save as Template. 

The Save As Template dialog box appears. 



The existing template, product_page, was created for and applied to the 
completed Scaal site product pages. You’ll create your own version of 
this template. 

3 In the Save As field, change the template name: type my_product_page, and 
then click Save. 

A new document appears in the Document window. Notice the Template 
identifier as well as the file extension .dwt. 


< < T emplate> > (my_product_page. dwt) - D ream weaver 
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Modify the template 

At this point, your new template is the same as the page from which you saved the 
template. The layout for certain page areas need to be the same on each product 
page: the product photo, product name, product description, and product price. 
You’ll see how to define these areas in your template. 

Each template contains both locked and editable regions. Locked regions can be 
edited only inside the template itself; they appear in a highlight color on all pages 
the template is applied to. Editable regions are placeholders for the content that is 
unique to each page the template is applied to. In an applied template, the 
editable regions are highlighted. 

1 In the my_product_page.dwt template in the Document window, select and 
delete the compact disc image; then type Insert image here in the table cell. 

2 Select the text you just typed. 

a 



3 Choose Modify > Templates > New Editable Region. 

The New Editable Region dialog box appears. 

4 In the Name field, type Image as the name for this region of the template. 
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5 Click OK. 


Notice the text is now highlighted, indicating this is an editable region of 
the template. 

6 In the Document window, select “Scaal Sound,” then choose Modify > 
Templates > New Editable Region to make this an editable region in 
the template. 

7 In the Name field in the New Editable Region dialog box, type Name and click 
OK. 

In the Document window, the region is highlighted and identifiable by the 
region name you gave it. 

8 In the Document window, select the product description text, and then choose 
Modify > Templates > New Editable Region to make this an editable section of 
the template. 

9 In the Name field in the New Editable Region dialog box, type Description 
and click OK. 

In the Document window, the region is highlighted and identifiable by the 
region name you gave it. 

10 Choose File > Save to save your template. 

The Update Pages dialog box appears, asking if you want to update all the 
documents in your local site. Selecting Yes would update the pages in the 
completed Scaal site, which you don’t want to do. 

11 Click No, and then click Close to close the Update Pages dialog box. 

12 Close the template. 
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Apply the template 

Now you’ll use the template to create a new product page. 
1 Choose File > New from Template. 

The Select Template dialog box appears. 



2 In the Templates list, select my_product_page as the template to apply, and 
then click Select. 

A new untitled document appears. 
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insert image here 


our story j 


products : 


this weekj 


name 

. 

price: $12.95 


The darker regions of the document are editable; all other regions of the 
document are locked and cannot be edited. 

3 Save your document, and name the file my_products_mug.html. 
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Edit the document 


With the editable regions set, updating pages is easy. You’ll replace the placeholder 

text with an image, and add text to create Scaal’s Commuter Mug product page. 

1 Place the insertion point in the Image region. 

2 Choose Insert > Image, and in the dialog box that appears select mug.jpg. Then 
click Select (Windows) or Choose (Macintosh) to select the image. 

3 Delete the Image placeholder “Insert image here” text. 

4 In the Document window, in the Name region, type a name for the product, 
such as Commuter Mug, and delete the placeholder. 

5 In the Document window, in the Description region, type some descriptive text 
about the mug and delete the placeholder. 

6 Save your document. 

7 Close the document. 

In the next section of the tutorial, you’ll link product page documents to 

Scaal’s main products page. The product pages you’ll link were created using a 

similar template. 
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Create a jump menu 

A jump menu is a pop-up menu of options that link to and open files in a browser 
window. You’ll create a jump menu that allows a customer to quickly jump from 
the products index page to specific product pages in the Scaal site. 

Before you create the jump menu, preview the completed page. 

1 In the Site window, double-click the icon for the products_index.html file 
to open it. 

2 Press F12 to preview the page in the browser. 


SCAAL 


brave new world coffee 


products 


cojjee search 


| products 



coffee search 
coffee blends 
coffee foods 
coffee tools 
coffee wear 


this week 


There are so many places you 
could go to buy coffee. WeVe 
gone to extraordinary efforts to 
ensure that SCAAL is your best 
choice. The quality begins at 
harvest. SCAAL relies on selective 
picking, a labor-intensive process 
that involves making several 
passes among the trees for those 
cherries that are perfectly ripe. 
Then we select top grade SHB, 
which stands for strictly hard bean 
or strictly high grown. Beans that 
are grown at a minimum altitude of 
4,000 feet above sea level for 
optimum flavor. Within hours of 
shipping our coffee to you, the 
beans are roasted on-site in small 
batches by a Certified 




3 Click the arrow to the right of the Select a Product pop-up menu to display the 
product selection menu. Select a product to view. 

4 When you have finished viewing the files, close the browser window. 

5 Close the products_index file. 
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Insert a jump menu 

The jump menu you create will contain a selection prompt to inform viewers of 
options. You’ll also create two menu commands that link to product pages. 

1 In the Site window, double-click the icon for the DW3_products_index.html 
file to open it. 

2 Select and delete the text “insert jump menu here.” 

3 With the insertion point in the table cell, choose Insert > Form Object > 
Jump Menu. 

The Insert Jump Menu dialog box appears. 



4 In the Text field, type Select a product. 

This text prompts a viewer to take action. 

5 Under Options, select the Select First Item After URL Change option. 

This sets the first entry in a menu as the item to which the menu returns after a 
user selects an option in the jump menu. 

6 Click the plus (+) button to add another jump menu item. 

7 In the Text field, type Compact disc. 

8 In the When Selected, Go To URL field, click Browse and navigate to 
DW3_products_cd.html. Click Select (Windows) or Choose (Macintosh) to 
select the file you want to open when the item is selected. 

9 Click the plus (+) button to add one more jump menu item. 
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10 In the Text field, type Coffee mug. Then click Browse and navigate to 

DW3_products_mug.html. Click Select (Windows) or Choose (Macintosh) to 
select the file you want to open when the item is selected. 

Your Insert Jump Menu dialog box should look similar to the screen below. 



11 Click OK to close the dialog box. 

12 Save your document. 

The jump menu doesn’t work in the Document window; you must preview it 
in a browser to test your links. 


Check your site 

Now that you’ve made all necessary edits to the partially completed files, preview 

the entire site in a browser to see how it looks. 

1 With the DW3_scaal_home page open, press F12 to open the page in 
a browser. 

2 Click the Our Story, Products, and This Week images to view the other 
pages you edited for the site. Try selecting the jump menu items on the 
Products page. 

3 When you’ve finished looking at the site you built, close the browser window; 
then return to Dreamweaver and choose File > Close to close the home page. 
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CHAPTER 2 

Dreamweaver Basics 


Getting started in Dreamweaver is as easy as opening an existing HTML 
document or creating a new one. But to get the most out of your Dreamweaver 
experience, you should understand the basic concepts behind the Dreamweaver 
work area and how to choose options that best fit your style of working. 
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About the Dreamweaver work area 


The Dreamweaver work area is flexible, to accommodate different styles of 

working and levels of expertise. It has some components you will use constantly: 

• The Document window displays the current document as you create and 
edit it. 

• The Launcher contains buttons for opening and closing your most frequently 
used inspectors and palettes. The icons on the Launcher are repeated on the 
Mini-Launcher at the bottom of the Document window for easy access when 
the Launcher is closed. You can set which icons appear in the Launcher using 
the Floating Palettes panel of the Preferences dialog box. 

• The Object palette contains buttons for creating various types of objects, such 
as images, tables, layers, and so on. 

• The Property inspector displays properties for the selected object or text, and it 
allows you to modify those properties. 

• Context menus let you quickly access useful commands pertaining to the 
current selection or area. 

• Dockable floating palettes let you combine floating windows, inspectors, and 
palettes into one or more tabbed windows. 
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Using the Window menu 

The Window menu provides easy access to all of the windows, inspectors, and 
palettes in Dreamweaver. A check mark next to an item in the Window menu 
indicates that the named item is currently open. (Though it may be obscured 
behind other windows.) To display an item that doesn’t have a check mark next to 
its name, select the item name from the menu. 

In general, if you aren’t sure where to look for a Dreamweaver feature, try the 
Window menu. 


Using dockable floating palettes 

Most of the palettes and inspectors in Dreamweaver can be docked , or combined 
into a single floating palette with multiple tabs. This makes it easy to access the 
information you need without cluttering your workspace. (The Launcher, 
Property inspector, and Site window cannot be docked.) 

To combine two or more palettes to create a tabbed palette: 

1 Drag the tab (not the title bar) of one floating palette over another floating 
palette. When a highlighted border appears around the target palette, release 
the mouse button. 

2 Click any tab in the window to bring the corresponding palette to the front. 

Because the Object palette does not have a tab, you can’t dock it with another 
palette by dragging the Object palette onto the other palette; however, you can 
drag the tab of another palette over the Object palette to combine them. 

To remove a palette from the tabbed palette: 

Drag its tab out of the window. 

To move a palette from one tabbed palette to another: 

Drag its tab to the other tabbed palette. When a highlighted border appears 
around the target palette, release the mouse button. 
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Setting Floating Palettes preferences 

Use Floating Palettes preferences to specify which palettes and inspectors always 
appear in front of the Document window, and which ones are allowed to be 
obscured by the Document window. Also use this preferences panel to specify 
which palettes and inspectors appear in the Launcher. (All items that appear in the 
Launcher also appear in the Mini-Launcher.) 


To specify where each palette appears in relation to the Document window: 

1 Choose Edit > Preferences, then select Floating Palettes from the category list. 

By default, all windows, palettes, and inspectors are selected to appear in front 
of the Document window. 

2 Deselect the windows, palettes, and inspectors that you want to appear in back 
of the Document window. 

For example, if you want to allow the Document window to obscure the 
HTML Source inspector, deselect the HTML option. The HTML Source 
inspector now appears in front of the Document window only when it is active. 

Similarly, if you want to allow the Document window to obscure any floating 
palettes that you have added by customizing Dreamweaver, deselect All 
Other Floaters. 
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About the Document window 

The Document window displays the current document approximately as it 
will appear in a Web browser. The title bar of the Document window displays 
the page title and, in parentheses, the file name and an asterisk if the file contains 
unsaved changes. 

The tags that control the selected text or object appear in the tag selector at the 
bottom left of the Document window. Click one of these tags to highlight its 
contents in the Document window. Click <body> to select the contents of the 
whole body of the document. 

The set of buttons at the bottom right of the Document window is called the 
Mini-Launcher; it is a smaller version of the Launcher. The buttons that appear by 
default on the Mini-Launcher are the same as the ones on the Launcher: they 
open the Site window, Library palette, HTML Styles palette, CSS Styles palette, 
Behavior inspector, History palette, and HTML Source inspector. 

The estimated document size and download time of the page, including all 
dependent files such as images and Shockwave movies, appear to the left of the 
Mini-Launcher. See Checking download time and size. 

The Window Size pop-up menu lets you resize the document window to 
predetermined or custom dimensions. See Resizing the Document window. 
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Resizing the Document window 

The current dimensions (in pixels) of the Document window appear in the 
window’s status bar. Clicking the window size brings up the Window Size pop-up 
menu, which allows you to set the window size to fit any of several common 
monitor sizes. To help you design a page that looks good at a specific size (or 
several different sizes), you can adjust the Document window to any of the sizes 
listed on the pop-up menu. 

Note: The window size is given as the inside dimensions of the browser window, without 
borders; the monitor size is listed in parentheses. So, for example, the option "536 x 196 
(640 x 480, Default)" is the window size to use if your visitors are likely to be using Internet 
Explorer or Netscape Navigator in their default configurations on a 640 x 480 monitor. 


To resize the Document window to a predetermined size: 

Choose one of the sizes from the pop-up menu at the bottom of the Document 
window. 

To change the values listed in the Window Size pop-up menu: 

1 Choose Edit Sizes from the Window Size pop-up menu. 

2 Click any of the Width or Height values in the Window Sizes list and type a 
new value. 

To make the Document window adjust only to a specific width (leaving the 
height unchanged), select a Height value and delete it. 

3 Click the Description field to enter descriptive text about a specific size. 

To add a new size to the Window Size pop-up menu: 

1 Choose Edit Sizes from the Window Size pop-up menu. 

2 Click the blank space below the last value in the Width column. 

3 Enter values for Width and Height. 

4 Click the Description field to enter descriptive text about the size you added. 

For example, you might type “SVGA” or “average PC” next to the entry for an 
800 x 600 pixel monitor, and “17-in. Mac” next to the entry for an 832 x 624 
pixel monitor. Note that most monitors can be adjusted to a variety of pixel 
dimensions. 
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Setting Status Bar preferences 

Use Status Bar preferences to set options for the status bar at the bottom of the 
Document window. To display these preferences, choose Edit > Preferences and 
select Status Bar. 

Window Sizes lets you customize the window sizes that appear in the status bar’s 
pop-up menu. See Resizing the Document window. 

Connection Speed determines the connection speed (in kilobits per second) used 
to calculate the download size. The download size for the page is displayed in the 
status bar. The download size for images is displayed in the Property inspector 
when an image is selected. 

Show Mini-Launcher in Status Bar makes Dreamweaver display the Mini-Launcher 
at the bottom of the Document window. The buttons in the Mini-Launcher 
launch windows, palettes, and inspectors. 

Using the Property inspector 

The Property inspector allows you to examine and edit properties for the currently 
selected page element. (A page element is an object or text.) You can select page 
elements in either the Document window or the HTML Source inspector. 

To show or hide the Property inspector, choose Window > Properties. 
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Most changes you make to properties are immediately applied in the 
Document window. (There are some properties for which you may need to click 
outside their property-editing text fields, or press Tab to switch to another 
property, to apply a change.) 

Which properties appear in the Property inspector depends on the element 
selected. For information on specific properties, select an element in the 
Document window and then click the Help icon in the upper right corner of the 
Property inspector. 

The Property inspector initially displays the most commonly used properties of 
the selected element. Click the expander arrow in the lower right corner of the 
Property inspector to see more of the element’s properties. (In a few cases, certain 
obscure properties may not appear even in the expanded Property inspector.) 
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Using the Launcher 

The Launcher contains buttons for opening and closing various palettes, 
windows, and inspectors. To show or hide the Launcher, choose Window > 
Launcher. 
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To switch the Launcher’s orientation from horizontal to vertical, click the 
orientation icon at the lower right. 

For information on the default Launcher buttons, see About the Site window, 
Using the Library palette, Formatting text using HTML styles, Using the CSS 
Style palette, Using the Behavior inspector, About the History palette, or Using 
the HTML Source inspector. 


Customizing the Launcher 

Use the Floating Palettes preferences to determine which items appear in the 
Launcher and in the Mini-Launcher at the bottom of the Document window. 

To specify which floating palettes appear in the Launcher and Mini-Launcher: 

1 Choose Edit > Preferences, then select Floating Palettes from the category list. 

The items selected to display in the Launcher and Mini-Launcher are listed in 
the Show in Launcher box. By default, seven items are listed. 

2 To add an item to the Launcher and Mini-Launcher, click the plus (+) button. 

3 To remove an item from the Launcher and Mini-Launcher, highlight the item 
and click the minus (-) button. 

4 To move an item up or down the list, corresponding to moving it left or right 
(respectively) in the Launcher and Mini-Launcher, select the item and then 
click the arrow keys. 

5 Click OK. 

The Launcher and Mini-Launcher change to show the items you specified. 
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Using the Object palette 

The Object palette contains buttons for inserting objects such as tables, layers, 
and images. To show or hide the Object palette, choose Window > Objects. To 
insert an object, click the corresponding Object palette button or drag the button’s 
icon into the Document window. Hold down the Control (Windows) or Option 
(Macintosh) key while inserting an object to bypass the object-insertion dialog 
box and instead insert an empty placeholder object of the specified type. (For 
instance, to insert a placeholder for an image, without specifying an image file, 
hold down Control or Option and click the Image button.) 

The Object palette contains six panels by default: Characters, Common, Forms, 
Frames, Head, and Invisibles. Use the pop-up menu at the top of the palette to 
switch between panels. You can modify any object in the palette or create your 
own objects; see Changing the Object palette. For information on each panel’s 
options, see the related topics in Dreamweaver Help. 



The Object palette contains the following panels: 

• The Common panel contains the most commonly used objects, such as Image, 
Table, and Layer. 

• The Characters panel contains special characters such as the copyright symbol, 
curved quotation marks, and trademark symbols. (Note that these symbols may 
not display correctly on browsers other than Netscape Navigator 3 and 4 and 
Internet Explorer 3 and 4.) 

• The Forms panel contains buttons for creating forms and form elements. 

• The Frames panel contains common frameset structures. 


Dreamweaver Basics 69 



















• The Head panel contains buttons for adding various HEAD elements, such as 
META, KEYWORDS, and BASE tags. 

• The Invisibles panel contains buttons for creating objects that are not visible in 
the Document window, such as named anchors. Choose View > Invisible 
Elements to display icons that mark the locations of these objects. Click 
invisible-element icons in the Document window to select the objects and 
change their properties. See About invisible elements. 

Some of the General preference settings affect the Object palette. To modify these 

preferences, choose Edit > Preferences and then choose General. 

• When you insert objects such as images, tables, scripts, and HEAD elements, a 
dialog box prompts you for additional information. You can suppress these 
dialog boxes by turning off the Show Dialog When Inserting Objects option. 
When you insert an object with this option off, the object is given default 
attribute values. Use the Property inspector to change object properties after 
inserting the object. 

• The Object Palette preference lets you display the contents of the Object 
palette as Text Only, Icons Only, or Text and Icons. 


Using the History palette 

The History palette keeps track of every step of your work in Dreamweaver. To 
display the History palette, choose Window > History. 



You can use the History palette to undo multiple steps at once, to replay steps 
you’ve performed, and to automate tasks by creating new commands. For details, 
see About the History palette. 
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Using context menus 

Dreamweaver makes extensive use of context menus, which provide a method for 
quickly accessing the most useful commands and properties related to the object 
or window you’re working with. Context menus list only commands pertaining to 
the current selection. 


To use context menus: 

1 Open the context menu by right-clicking (Windows) or Control-clicking 
(Macintosh) the object or window. 

2 Select the command from the context menu and release the mouse button. 
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Using the HTML Source inspector 

The HTML Source inspector shows the code that browsers use to display the 
document as a Web page. To show or hide the HTML Source inspector, choose 
Window > HTML Source. 

Changes you make in the Document window are immediately reflected in 
the HTML Source inspector. When you enter HTML into the HTML 
Source inspector and then click outside the inspector, corresponding changes 
appear in the Document window. For more information, see Using the HTML 
Source inspector. 

For minor editing of HTML tags, you can use the Quick Tag Editor instead of 
showing the HTML Source inspector. To display the Quick Tag Editor, press 
Control+T (Windows) or Command+T (Macintosh), or choose Modify > 
Quick Tag Editor. For more information, see Editing an HTML tag in the 
Document window. 


72 Chapter 2 



Setting preferences 

Dreamweaver has preference settings that control the general appearance of the 
Dreamweaver user interface as well as options related to specific features such as 
layers, style sheets, HTML, external editors, and previewing pages in browsers. 
Information about specific preference options is provided throughout this user 
guide in conjunction with the associated feature or topic. 

This guide describes only the most common of the preference options. 

For information on a specific preference option not covered here, see the 
corresponding topic in Dreamweaver Help. 


Setting General preferences 

The General preferences control the general appearance of Dreamweaver. To 
change these preferences, choose Edit > Preferences, and then click General. 


Setting Fonts/Encoding preferences 

Use Fonts/Encoding preferences to set a default font encoding for new documents 
and to set the fonts that Dreamweaver uses to display each font encoding. A 
document’s encoding determines how the document is displayed in a browser. 
Dreamweaver’s font settings let you work with text in the font and size you prefer 
without affecting how the document appears when viewed by others in a browser. 

To change the encoding of the current document: 

Choose Modify > Page Properties and then select an encoding from the 
Document Encoding pop-up menu. 

To change the default encoding to be used when creating new documents: 

Choose Edit > Preferences, click Fonts /Encoding in the Category list, and choose 
an encoding from the Default Encoding pop-up menu. 

To set the fonts to use for each type of encoding: 

1 Choose Edit > Preferences and click Fonts /Encoding in the Category list. 

2 Select the encoding type (such as Western (Latin 1) or Japanese) from the Font 
Settings list, then choose fonts to use for that encoding from the font pop-up 
menus below the Font Settings list. 
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Using Dreamweaver with other applications 

Dreamweaver accommodates your Web design and development process by 

making it easy for you to work with other applications. For information about 

working with other applications such as browsers, HTML editors, image editors, 

and animation tools, see the following topics: 

• For information about using Dreamweaver with other HTML editors, such as 
HomeSite or BBEdit, see Using external HTML editors. 

• You can specify preferred browsers for previewing your site. See Previewing in 
browsers. 

• You can launch an external image editor, such as Macromedia Fireworks, from 
within Dreamweaver. See Using an external image editor. 

• You can configure Dreamweaver to launch a different editor for each file type. 
See Launching an external media editor. 

• For information about adding animation to your site with Flash movies, see 
Inserting Flash movies. 

• To learn how to add interactivity to your site with Shockwave movies, see 
Inserting Shockwave movies. 
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CHAPTER 3 

Creating Sites and Documents 


A Web site is a set of linked documents with shared attributes, such as related 
topics, a similar design, or a shared purpose. 

You can create individual documents with Dreamweaver. But most Web designers 
create coherent sites, not merely collections of assorted unrelated documents. 
Dreamweaver is a site creation and management tool as well as a document 
creation and editing tool. 

Creating a site from a collection of disparate premade documents is much more 
difficult than creating new documents from a common site design. For best 
results, design and plan your site before you create any of the pages that will 
populate it. 

Note: If you can't wait to start creating documents immediately, you can try out some of 
Dreamweaver's document-creation tools and make a sample document. (See "Creating and 
editing HTML documents" on page 86.) But don't start serious document development until 
you've set up a site. 

The first step in creating a Web site is planning. See “About site planning” on 
page 76. The next step is to set up the basic structure of the site; see “Creating a 
local site” on page 78. If you already have a site on a Web server and you want to 
begin using Dreamweaver to edit that site, see “Editing and updating an existing 
site” on page 80. 

Once you’ve created the local site, you can populate it with documents. 
Documents are the pages users see when they visit a Web site. Documents can 
contain text and images, as well as more sophisticated content such as sound, 
animation, and links to other documents. As you create and work with 
documents, Dreamweaver automatically generates the underlying HTML. Use 
the HTML Source inspector to examine or edit the HTML source code. 
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You can create documents in Dreamweaver starting from either blank HTML 
pages or templates. You can also open and modify HTML documents created in 
other applications. See “Creating and editing HTML documents” on page 86. 

Use the Page Properties dialog box to set up a document and define basic page 
elements. The page title identifies the document to the user. Background images, 
background colors, and text and link colors customize the page and distinguish 
regular text from hypertext. See “Setting document properties” on page 95. 

Add text to documents by typing in the Document window or by pasting text 
from other sources. Add images, horizontal rules, and other objects by using the 
Object palette or commands on the Insert menu. See “Adding text and inserting 
objects” on page 88. 

As you add content, you can select and modify objects directly in the Document 
window. In some cases, you may need to select markers that represent page 
elements that are not visible in the Document window. See “Selecting elements in 
the Document window” on page 91. 

To help you manage your site, Dreamweaver displays the files in the site as either a 
list of files or a site map. You can use the site map to quickly create and view 
prototypes of your Web sites. See “Working with site files” on page 84 and 
“Viewing the site structure” on page 127. 

When you have some documents in your site, you can create links to connect 
them to other documents within your site, to documents on remote sites, or to 
e-mail addresses or scripts. See “Creating links” on page 114. 

Finally, set up a remote site corresponding to your local site, and upload the local 
files to the remote site to make your pages visible to visitors. See “Setting up a 
remote site” on page 140. 


About site planning 

In Dreamweaver, the term site can refer either to a Web site or to a local storage 
location for the documents belonging to a Web site. The usual way to set up a site 
is to create a folder on your local disk that contains all the files for your site, and to 
create and edit documents within that folder. You then periodically copy those 
files to a Web server that allows other people to view the site. This approach is 
better than creating and editing files on the live Web site itself, because it allows 
you to test changes in the local site before making them publicly viewable, and 
then to make a set of changes to the live site all at once instead of one at a time. 
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Planning site structure 

Organizing your site carefully from the start can save you time later on. If you 
start creating documents without thinking about where in your folder hierarchy 
they should go, you may end up with a huge, unwieldy folder full of files, or with 
related files scattered through a half-dozen similarly named folders. 

Break down your site into categories put related pages into the same folder; for 
example, your company press releases, contact information, and job postings 
might all go in one folder, and your online catalog pages in another folder. Use 
subfolders where necessary. 

Decide where to put items such as images and sound files it’s convenient to place 
all your images, for example, in one location, so that when you want to insert an 
image into a page you know where to find it. Designers sometimes place all of the 
non-HTML items to be used on a site in a folder called Assets. That folder may 
contain other folders—for example, an Images folder, a Shockwave folder, and a 
Sound folder. Or you might have a separate Assets folder for each group of related 
pages on your site, if there aren’t many assets shared among such groups. 

Site 1 Site 2 



Use the same structure for local and remote sites your local site and your remote 
Web site should have exactly the same structure. If you create a local site using 
Dreamweaver and then upload everything to the remote site, Dreamweaver 
ensures that the local structure is precisely duplicated in the remote site. 
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Planning site navigation 

Another area where planning pays off is navigation. As you design your site, think 
about the experience you want your visitors to have. 

"You are here" it should always be easy for visitors to figure out where in your site 
they are, and how to return to your top-level page. 

Searching and indexes it should be easy for visitors to find any information 
they want. 

Feedback provide a way for visitors to contact the webmaster (if appropriate) if 
something is wrong with the site, and to contact other relevant people associated 
with the company or the site. 

Use Dreamweaver’s navigation tools to help you design navigation for your site. 
See “Linking and Navigation” on page 109 for more information. 


Planning template and library use 

Dreamweaver’s templates and libraries allow you to reuse page layouts and page 
elements in various documents. But it’s more difficult to apply reusable layout and 
elements to a set of existing pages than it is to build new pages using reusable 
elements from the start. 

Use templates if many of your pages will use the same layout, plan and design a 
template for that layout. Then you can create new pages based on that template, 
and if you decide to change the layout for all such pages, you can simply change 
the template. 

Note: There are certain restrictions on what changes you can make to documents based on 
templates. Templates are best used in collaborative environments, to ensure that everyone is 
using the same page layout. Library items may provide more flexibility for use outside of 
collaborative environments. 

Use library items if you know that a certain image or other content will appear on 
many pages throughout your site, design that content ahead of time and make it a 
library item. Then if you change that item later, the new version appears on all 
pages that use it. 

For more information on reusing page layouts and elements, see “Templates and 
Libraries” on page 355. 


Creating a local site 

A local site—the local storage area for your Web site’s files—requires a name and a 
local root folder where you plan to store all of the site’s files. Create a different 
local site for each Web site you work on. 
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The local root folder of your site should be a folder you set up specifically for that 
site. Don’t use your disk as the site root, and don’t use the Dreamweaver 
application folder. One good organizational approach is to create a folder named 
Sites, and then create local root folders inside that folder, one local root folder for 
each site you’re working on. 

To create a local site: 

1 Choose Site > New Site. 

In the Site Definition dialog box that appears, the Local Info category 
is selected. 

2 Enter the following options: 

• In the Site Name field, enter a name for the site. The site name appears in the 
Site window and on the Site > Open Site submenu. The name can be anything 
you like. 

• In the Local Root Folder field, specify the folder on your local disk where site 
files, templates, and library items will be stored. When Dreamweaver resolves 
root-relative links, it does so relative to this folder. (See “About root-relative 
paths” on page 113) Click the folder icon to browse to and select the folder, or 
enter a path and folder name in the text field. If the local root folder does not 
yet exist, create it from within the file browsing dialog box. (Note that you may 
be unable to create a folder in that dialog box if you’re using a Macintosh 
without Navigation Services installed.) 

• For the Refresh Local File List Automatically option, indicate whether or not to 
automatically refresh the local file list every time you copy files into your local 
site. Deselecting this option improves the speed of Dreamweaver when copying 
such files, but when this option is deselected, the Local pane of the Site window 
does not automatically refresh. To manually refresh the Site window, click the 
Site window’s Refresh button. To manually refresh the Local pane only, choose 
View > Refresh Local in the Site window (Windows) or Site > Site Files View > 
Refresh Local (Macintosh). 

• In the HTTP Address field, enter the URL that your completed Web site will 
use, so that Dreamweaver can verify links within the site that use absolute 
URLs. (See “Checking links between documents” on page 168.) For example, 
the HTTP address for Macromedia’s Web site is http://www.macromedia.com. 

• For the Cache option, indicate whether or not to create a local cache to 
improve the speed of link and site management tasks. If you do not select this 
option, Dreamweaver will prompt you again about creating a cache before it 
creates the site. 

3 Click OK. 

Later, when you’re ready to publish the site on a remote server, you will need to 
add additional information about the site. For information about remote sites, see 
“Setting up a remote site” on page 140. 
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Editing and updating an existing site 

You can use Dreamweaver to copy an existing remote site (or any branch of a 
remote site) to your local disk and edit it there, even if you didn’t use 
Dreamweaver to create the original site. 

Note that even if you intend to edit only part of the remote site, to avoid problems 
you must locally duplicate the entire structure of the relevant branch of the 
remote site, from the remote site’s root folder down to the files you want to edit. 
For example, if your remote site’s root folder, named public_html, contains two 
folders, Projectl and Project2, and if you want to work only on the HTML files in 
Projectl, you don’t need to download the files in Project2, but you must map your 
local root folder to public_html, not to Projectl. 

Remote site Local site 
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To edit an existing Web site: 

1 Set up a local site to copy the remote site into. That is, create a local folder to 
contain the site, and set it up as the local root folder (see “Creating a local site” 
on page 78). 

2 Set up a remote site, using information about your existing site. See “Setting up 
a remote site” on page 140. Be sure to choose the correct root folder for the 
remote site. 

3 Connect to the remote site using the Connect button in the Site window. 

4 Depending on how much of the remote site you want to edit, do one of 
the following: 

• If you want to work with the entire site, select the root folder of the remote site, 
and click Get to download the entire site to your local disk. 

• If you want to work with just one of the files or folders of the site, locate the file 
or folder in the Remote pane of the Site window, and click Get to download 
that file to your local disk. (Dreamweaver automatically duplicates as much of 
the remote site’s structure as is necessary to place the downloaded file in the 
right part of the site hierarchy.) When editing only one part of a site, you 
should generally choose to download dependent files. 

5 Proceed as if creating a site from scratch: edit documents, preview and test 
them, and upload them again to the remote site. 


Viewing and opening files in the Site window 

Use the Site window for viewing local and remote sites, adding or removing site 
documents, or laying out the navigational structure of your site with a site map. 
For more information, see “About the Site window” on page 144. 

You can set each of the two Site window panes to show the local site, the remote 
site, or a graphical map of the local site. For example, you can view the local site in 
one pane and the remote site in the other, or you can view the local site in files 
view in one pane, and in map view in the other pane. (For information on viewing 
site maps, see “Viewing the site structure” on page 127.) 

Viewing local sites 

The Site window can display the contents of both local and remote sites. Local 
sites are displayed as a list of files, a visual map, or both. Remote sites are displayed 
only as a list of files. Before you can view a remote site, you must set one up; see 
“Setting up a remote site” on page 140. 
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To view local site files, do one of the following: 

• Choose Window > Site Files. 

• In the Site window, if the site map is showing, click the Site Files button. 





avocado8 


Site Navigation:^a index.html 


The pane displaying local site Hies is labeled Local Folder and the pane 
displaying remote site files is labeled Remote Site. 

Note: If you are viewing a local site that has no corresponding remote site, the Remote 
Site pane is empty. 


To view the site map and the site files, do one of the following: 

• Choose Window > Site Map. (If you previously viewed the map only, without 
the site’s files, this displays the map only.) 

• In the Site window, click the Site Map button, or hold down the mouse button 
with the pointer over the Site Map button and select Map and Files from the 
pop-up menu. 
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Map Only 

Map and Files 


The pane displaying the local site as a map is labeled Site Navigation; the other 
pane displays either the local site files (labeled Local Folder) or the remote site 
files (labeled Remote Site), depending on the Always Show preferences you set. 

To view only the site map: 

Hold down the mouse button with the pointer over the Site Map button and 
select Map Only from the pop-up menu. 
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Changing site displays 

By default, the remote site (or the local site map) appears in the left pane of 
the Site window and the local site appears in the right pane. You can switch 
these displays. 

To set which panes the local and remote sites appear in: 

1 Choose Edit > Preferences and select the Site FTP category. 

2 Do either of the following: 

• Select Local Files from the Always Show menu, and then choose whether to 
display the local files in the right or left pane of the Site window. 

The local site will appear in the pane you have selected, and the remote site (or 
the site map) will appear in the opposite pane. When you choose this option, 
the local site files view is always shown in the Site window, even when you 
collapse the window to one pane. 

• Select Remote Files from the Always Show menu, and then choose whether to 
display the remote files in the right or left pane of the Site window. 

The remote site will appear in the pane you have selected, and the local site (or 
the site map, which is always local) will appear in the opposite pane. When you 
choose this option, the remote site files view is always shown in the Site 
window, even when you collapse the window to one pane. 

3 Click OK to close the Preferences dialog box and apply changes. 

To change the view area: 

In the Site window, do one of the following: 

• Drag the bar that separates the panes to increase or decrease the view area of the 
right or left window pane. 

• Use the scroll bars at the bottom of the panes to scroll the contents of 
the panes. 

• In the site map, drag the arrow above a file to change the space between files. 

To collapse the Site window to one pane: 

Click the small triangle button in the lower left of the Site window. 

Note: The pane that remains visible is whichever pane you chose to always show in the Site 
FTP preferences dialog box. 

For more information about site preferences, see “Setting Site FTP preferences” 
on page 146. 


Creating Sites and Documents 83 



Working with site files 

Use the Site Files view to view local and remote sites as lists of files, to open files, 
to add new folders or files to a site, or to refresh the view of a site after changes 
have been made. You can also use Site Files view to determine which files (on 
either site) have been updated since the last time they were transferred. For 
information on synchronizing the local site with the remote site, see 
“Synchronizing the files on your local and remote sites” on page 153. 

To view the site files: 

Do one of the following: 

• Choose Window > Site Files to open the Site window in Site Files view. 

• In the Site window, click the Site Files button. 

To open a file from the Site Files view: 

Double-click the file’s icon. 

To add a new folder to a site: 

1 Make sure a file or folder is selected in the Site window; the new folder is 
created inside the current selected folder, or in the same folder as the current 
selected file. 

2 Choose File > New Folder in the Site window (Windows) or Site > Site Files 
View > New Folder (Macintosh). 

3 Enter a name for the new folder. 

To add a new file to a site: 

1 Make sure a file or folder is selected in the Site window; the new file is 
created inside the current selected folder, or in the same folder as the current 
selected file. 

2 Choose File > New File in the Site window (Windows) or Site > Site Files 
View > New File (Macintosh). 

3 Enter a name for the new file. 

To refresh the Site Files view after making changes outside of Dreamweaver: 

Do one of the following: 

• Choose View > Refresh Local in the Site window(Windows) or Site > Site Files 
View > Refresh Local (Macintosh). 

• Choose View > Refresh Remote in the Site window (Windows) or Site > Site 
Files View > Refresh Remote (Macintosh). 

• Click the Refresh button in the Site window to refresh both panes. 
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To locate and select newer local files: 

Choose Edit > Select Newer Local in the Site window (Windows) or Site > Site 
Files View > Select Newer Local (Macintosh). 

To locate and select newer remote files: 

Choose Edit > Select Newer Remote in the Site window (Windows) or Site > Site 
Files View > Select Newer Remote (Macintosh). 

For more information about working with local and remote sites, see “Using the 
check in/check out system” on page 147. 


Removing a site from your list of sites 

If you no longer wish to work with a site in Dreamweaver, you can remove the site 
from your list of sites. The files in the site are not removed. 

Note: When you remove a site from the list, all setup information about the site is lost 
permanently. 

To remove a site from your site list: 

1 Choose Site > Define Sites. 

2 Select a site name. 

3 Click Remove. 

A dialog box appears asking you to confirm the removal. 

4 Click Yes to remove the site from your list. 
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Creating and editing HTML documents 

Now that you have a site set up, you can begin to create the documents (pages) 
that constitute the site. (If you haven’t set up a site yet, see “Creating a local site” 
on page 78.) 

You can create new, blank HTML documents in Dreamweaver, or you can open 
an existing HTML document, regardless of how it was created. You can also create 
a new document based on a template. 

Note: When you save your documents, avoid using spaces and special characters in file and 
folder names whenever possible. 


To create a blank HTML document in a new Document window: 

Choose File > New from an existing Document window (Windows) or from the 
main menu bar (Macintosh). 

If you open the HTML Source inspector (choose Window > HTML Source), you 
can see that the new document isn’t really completely blank—it contains HTML, 
HEAD, and BODY tags to get you started. As you type in the Document window or 
insert objects such as tables and images, you can leave the HTML Source 
inspector open and watch as the HTML source code is created. For more 
information on the HTML Source inspector, see “Using the HTML Source 
inspector” on page 335. 

Note: Do not use special characters (such as e, 5 , or ¥) or punctuation (such as colons, 
slashes, or periods) in the names of files you intend to put on a remote server. Many servers 
change these characters during upload, which will cause any links to the files to break. 


To open an existing HTML file, do one of the following: 

• Choose File > Open. 

• If the file was created using Microsoft Word, choose File > Import > Import 
Word HTML. 

Dreamweaver opens the file and then removes extraneous or unnecessary 
HTML code generated by Word. (Microsoft Word 97 and later versions 
provide a Save as HTML feature, which adds extra HTML code as it converts a 
document to HTML.) For more information, see “Cleaning up Microsoft 
Word HTML” on page 348. 

Note: You can't directly import a Microsoft Word (.doc) file into Dreamweaver. If you 
want to import the contents of a Word file, launch Word and save the file as HTML 
before importing it into Dreamweaver. 
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To create a new document based on a template: 

1 Choose File > New From Template. 

A dialog box appears, listing the templates available for the current site. (You 
must create templates before you can create documents based on them; see 
“Creating templates” on page 357.) 

When you create a document based on a template, some parts of the document 
are locked so that they can’t be changed. (The template file determines which 
regions are editable and which are not.) This ensures consistency when you use 
a template for multiple documents in a site. 

2 Select a template and click Select. 

To modify the editable parts of the template, select the placeholder content 
and type over it. The noneditable parts of the template are identified by a 
highlight color. To customize the highlight color, see “Setting template 
preferences” on page 360. 

To learn more about designing and working with templates, see “Templates and 
Libraries” on page 355. 
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Adding text and inserting objects 

Add content to your pages by typing or pasting text and inserting objects such as 
images, tables, and layers. 

To add text to your document, do one of the following: 

• Type text directly into the Document window. 

• Copy text from another application, switch to Dreamweaver, position the 
insertion point in the Document window, and choose Edit > Paste as Text. 
Dreamweaver doesn’t preserve text formatting applied in the other application, 
but it does preserve line breaks. 

For more information about formatting text, see “Formatting Text” on 
page 177. 

To insert tables, images, and other objects into your document, do one of 
the following: 

• Use the commands on the Insert menu to insert the specified objects into your 
document at the insertion point location. 

• Choose Window > Objects to open the Object palette. Find the type of object 
you want and click or drag it to insert the object into the Document window. 

For most objects, a dialog box appears, prompting you to select options or the 
desired file. To hide the dialog box, choose Edit > Preferences, select General, 
and then deselect the Show Dialog When Inserting Objects option. 

Note: To insert multiple consecutive spaces, use Insert > Non-Breaking Space. (But if you 
want to line up items in columns, use a table instead.) 
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Inserting dates 

Dreamweaver provides a convenient Date object, which inserts the current date in 
whatever format you prefer and provides the option of updating that date 
whenever you save the hie. 

To insert the current date into a document: 

1 In the Document window, place the insertion point where you want the date to 
be inserted. 

2 Do one of the following: 

• Choose Insert > Date. 

• Open the Object palette by choosing Window > Objects, then open the 
Common panel and click the Date button. 

3 In the resulting dialog box, select a format for the name of the day of the week, 
a format for the date, and a format for the time. 

4 If you want the inserted date to be updated every time you save the document, 
select Update Automatically on Save. If you want the date to become plain text 
when it’s inserted and never update automatically, deselect that option. 

5 Click OK to insert the date. 

About special characters 

Certain special characters are represented in HTML by a name or a number, 
referred to as an entity. HTML includes entity names for characters such as the 
copyright symbol (&copy;) the ampersand (Samp;), and the registered-trademark 
symbol (&reg;). Each entity has both a name (such as &mdash;) and a numeric 
equivalent (such as &#151;). 

Unfortunately, many browsers (especially older browsers, and browsers other than 
Navigator and Internet Explorer) don’t properly display many of the named 
entities. Most browsers display most of the commonly used numeric entities, but 
remembering an entity’s number is harder than remembering its name. 

For a list of entity names and numbers, see the Entities Table URL given in 
“HTML and Web technologies resources” on page 19. 
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Inserting special characters 

You can insert several special characters (in the form of HTML entities) using the 
Characters panel of the Object palette. 

To insert a special character into a document: 

1 In the Document window, place the insertion point where you want to insert a 
special character. 

2 Do one of the following: 

• Choose the name of the character from the Insert > Characters submenu. 

• Open the Object palette (by choosing Window > Objects), select the 
Characters panel, and choose a character from the list. 

There are many other special characters available; to select one of them, choose 
Insert > Characters > More and select a character, then click OK. 


Using horizontal rules 

Horizontal rules (lines) are useful for organizing information. On a page, you can 
visually separate text and objects with one or more rules. 

To create a horizontal rule: 

1 In the Document window, place the insertion point where you want to insert a 
horizontal rule. 

2 Do one of the following: 

• Choose Insert > Horizontal Rule. 

• Choose Window > Objects to open the Object palette, and then click the 
Horizontal Rule button. 

To modify a horizontal rule: 

1 In the Document window, select the horizontal rule. 

2 Choose Window > Properties to open the Property inspector, and modify the 
properties as desired. 
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Selecting elements in the Document window 

Typically, you click an element to select it. If an element is invisible, you may need 

to make it visible before you can select it. 

Use these techniques to select elements: 

• To select a visible element in the Document window, drag across the element or 
click the element. 

• To select an invisible element, choose View > Invisible Elements (if it isn’t 
already selected) and then click the element’s marker. See “About invisible 
elements” on page 92. 

Some objects appear on the page in a place other than where their code is 
inserted. For example, a layer can be anywhere on the page, but the code 
defining the layer is in a fixed location. Dreamweaver displays markers in the 
Document window to show the location of the code for invisible elements. 

• To select a complete tag (including its contents, if any), click a tag in the tag 
selector at the bottom left of the Document window. The tag selector always 
shows the tags that surround the current selection or insertion point location. 


<body> <uble> <tr> <td> <b> 544 X 378▼ IK 71 sec Qj ( j] (D 0 ^ O 


tag selector 


For example, if you have defined a link for an image, the HTML code in the 
HTML Source inspector would look something like this: 

<a href= l 'http://www.macromedia.com“><img src="agraphic.gif“> </a> 

Clicking the image in the Document window selects the <img> tag in the tag 
selector, which corresponds to selecting <img src=“agraphic.gif"> in the HTML 
Source inspector. 

To select the link, click the image in the Document window and then click the 
<a> that appears in the tag selector, to the left of <img>. 

To see the HTML code associated with the selected text or object, choose 
Window > HTML Source to open the HTML Source inspector. (Selections you 
make in the HTML Source inspector are mirrored in the Document window.) 
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About invisible elements 


Choose View > Invisible Elements to show or hide markers in the Document 
window that represent invisible elements such as forms, named anchors, 
comments, and scripts. Showing invisible elements lets you select and view them 
and change their properties in the Property inspector. 

Which element markers appear when you choose View > Invisible Elements 
depends on the settings in the Invisible Elements panel of the Preferences dialog 
box. For example, you can specify that named anchors should be visible, but not 
line breaks. See “Setting Invisible Elements preferences” on page 92. 

You can create certain invisible elements (such as comments, named anchors, and 
scripts) using the buttons on the Invisibles panel in the Object palette. You can 
modify these elements using the Property inspector. See “Using the Object 
palette” on page 69. 

Setting Invisible Elements preferences 

Use Invisible Elements preferences to select which kinds of elements will be visible 
when you select View > Invisible Elements. Invisible elements such as scripts, 
comments, and named anchors are represented by markers in the Document 
window. Showing invisible elements lets you select these markers so that you can 
change the invisible elements’ properties in the Property inspector. 

To change Invisible Elements preferences: 

1 Choose Edit > Preferences, then click Invisible Elements 

2 Select which elements should be made visible. A check mark next to the name 
of the element in the dialog box means the element is visible when View > 
Invisible Elements is selected. 

For an explanation of each Invisible Elements preference, see Dreamweaver Help. 
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Choosing colors 

In Dreamweaver, many of the dialog boxes, as well as the Property inspector for 
many page elements, contain a color box, which opens a color palette. Use the 
color palette to choose a color for an element. 


To choose a color in Dreamweaver: 

1 Choose a color box in any dialog box or in the Property inspector. 


Color box 



2 Do one of the following: 

• Use the eyedropper to select a color swatch from the palette. All colors in the 
palette are Web safe. 

• Use the eyedropper to pick up a color from anywhere on your computer 
monitor, including outside of the Dreamweaver windows. (If you click the 
desktop or another application, Dreamweaver picks up the color where you 
clicked, but you may switch into the other application; in that case, click a 
Dreamweaver window to continue working in Dreamweaver.) 

• To limit the selection to Web-safe colors, make sure the Web-safe Eyedropper 
button is enabled. When this option is enabled, the color you select is changed 
to the closest Web-safe color. Click the button to disable this option. 
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• Click the Eraser button to clear the current color without choosing a 
different color. 

• Click the Palette button to open the system color picker. Colors chosen from 
the system color picker do not change to the closest Web-safe color even if the 
Web-safe eyedropper is active. 


About Web-safe colors 

In HTML, colors are expressed either as hexadecimal values (for example, 
#FF0000) or as color names (red). The colors that are common to Netscape 
Navigator and Microsoft Internet Explorer on both Windows and Macintosh 
systems when running in 256-color mode are called Web-safe. The conventional 
wisdom is that there are 216 common colors, and that any hexadecimal value that 
combines the pairs 00, 33, 66, 99, CC, or FF (RGB values 0, 51, 102, 153, 204, 
and 255, respectively) represents a Web-safe color. 

Testing, however, reveals that there are only 212 Web-safe colors. Internet 
Explorer on Windows does not correctly render the colors #0033FF (0,51,255), 
#3300FF (51,0,255), #00FF33 (0,255,51), and #33FF00 (51,255,0). 

All of the color pickers in Dreamweaver use the 212-color Web-safe palette; 
selecting a color from the palette displays the color’s hexadecimal value. While 
the four colors mentioned previously are not in the Dreamweaver Web-safe 
palette, you can edit the hexadecimal value in any color field by hand if you 
want to use them. 

To choose a color outside the Web-safe range, click the Palette button in the lower 
right corner of the Dreamweaver color picker to open the system color picker. The 
system color picker is not limited to Web-safe colors. 

UNIX versions of Netscape Navigator use a different color palette than the 
Windows and Macintosh versions. If you are developing exclusively for UNIX 
machines (or your target audience is Windows or Macintosh users with 24-bit 
monitors and UNIX users with 8-bit monitors), consider using hexadecimal 
values that combine the pairs 00, 40, 80, BF, or FF, which produce Web-safe 
colors on the SunOS. 
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Setting document properties 

Page titles, background images and colors, and text and link colors are basic 
properties of HTML documents. Page titles identify and name documents. 
Background images or colors set the overall appearance of the document. Text 
colors help users to distinguish regular text from hypertext and to see which links 
have been visited and which have not. 


Changing the title of a page 

The title of an HTML page helps users keep track of what they’re viewing as they 
browse, and it also identifies the page in history and bookmark lists. If you don’t 
title a page, the page will appear in the browser window, bookmark lists, and 
history lists as Untitled Document. Note that giving the document a file name (by 
saving it) is not the same as giving the page a title. 

To change the title of a page: 

1 Do one of the following: 

• Choose Modify > Page Properties. 

• Choose Page Properties from the context menu by right-clicking (Windows) or 
Control-clicking (Macintosh) in the Document window. 

• Choose View > Head Content, then click the Title button when it appears. 
Open the Property inspector to edit the title. 

2 Enter the title for the page in the Title box. 

3 If you’re using the Page Properties dialog box instead of the Property inspector, 
click OK. 

The title appears in the title bar of the Document window. The file name of the 
page and the folder the file is saved in appear in parentheses next to the title. 
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Defining a background image or page color 

Use the Page Properties dialog box to define an image or color for the page 
background. If you use both an image and a background color, the color appears 
while the image downloads. If the background image contains any transparent 
pixels, the background color shows through. 

To define a background image or color: 

1 Choose Modify > Page Properties, or select Page Properties from the 
context menu in the Document window. 

2 Set a background image and/or a background color: 

• Click the Browse button (Windows) or Choose button (Macintosh) to browse 
to and select the image, or enter the path to the background image in the 
Background Image box. 

Dreamweaver tiles (repeats) the background image if it does not fill the entire 
window, just as browsers do. 

• Choose a background color from the Background color box. 

See “Choosing colors” on page 93. 


Defining default text colors 

Define default colors for regular text, links, visited links, and active links in 
the Page Properties dialog box, or choose a preset color scheme to define 
the page background and text colors. For more information, see “Choosing 
colors” on page 93. 

Note: The active link color is the color that a link changes to while it's being clicked. 


To define default text colors, do one of the following: 

• Choose Modify > Page Properties and then choose colors for the Text Color, 
Link Color, Visited Links, and Active Links options. 

• Choose Commands > Set Color Scheme and then choose a Background color 
and a Text and Links color set. 

The sample box displays how the color scheme will look in the browser. 
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About the History palette 

The History palette shows a list of all the steps you’ve performed in the active 
document since you created or opened that document. (The History palette 
doesn’t show steps you’ve performed in other frames, in other document windows, 
or in the Site window.) It allows you to undo one or more steps; it also allows you 
to replay steps and to create new commands to automate repetitive tasks. 



Steps. 


Thumb (slider) 


Replay button 


Copy Steps button Save As Command button 


The slider, or thumb, in the History palette initially points to the last step that 
you performed. 

Note: You can't rearrange the order of steps in the History palette. Don't think of the History 
palette as an arbitrary collection of commands; think of it as a way to view the steps you've 
performed, in the order in which you performed them. 


To set the number of steps that the History palette retains and shows: 

1 Choose Edit > Preferences and select General from the Category list. 

2 Enter a number for Maximum Number of History Steps. 

The default value should be sufficient for most users’ needs. The higher the 
number, the more memory the History palette requires. If you exceed the 
maximum number of steps you set for the History palette, the earliest steps 
are discarded. 

To erase the History palette's history list for the current document: 

In the History palette’s context menu, choose Clear History. 

This command also clears all undo information for the current document; after 
choosing Clear History, you will be unable to undo the steps that are cleared. 
(Note that Clear History does not undo steps; it merely removes the record of 
those steps from Dreamweaver’s memory.) 
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Undoing changes 

To undo the last operation you performed in a document, choose Edit > Undo, 
just as you would do in any other application. (The name of the Undo command 
changes in the Edit menu to reflect the last operation you performed.) To undo 
more than one step at once, use the History palette. 

To open the History palette: 

Choose Window > History. 

To undo the last step: 

Drag the History palette thumb up one step in the list. This has the same effect as 
choosing Edit > Undo. 

The undone step turns gray. 

To undo multiple steps at once, do one of the following: 

• Drag the thumb to point to any step. 

• Click to the left of a step; the thumb scrolls automatically to that step. 

Note: To auto-scroll to a particular step, you must click to the left of the step; clicking the 
step itself selects the step. Selecting a step is different from going back to that step in your 
undo history. 



As with undoing a single step, if you undo a series of steps and then do something 
new in the document, you can no longer redo the undone steps; they disappear 
from the History palette. 

The History palette also allows you to repeat steps that appear in your step history, 
and to automate tasks based on steps you’ve performed.. 


98 Chapter 3 













Automating tasks 

To repeat a series of steps only a few times, replay them directly from the History 
palette. To automate a task that you perform often, create a new command that 
performs that task automatically. 

Some mouse movements, such as clicking or dragging to select something in the 
Document window, can’t be played back or saved as part of saved commands. 
When you make such a movement, a black line appears in the History palette 
(although the line does not become obvious until you perform another action). To 
avoid this, use arrow keys instead of mouse movement to move the insertion point 
within the Document window. Certain other steps also aren’t repeatable, such as 
dragging a page element to somewhere else on the page. When you perform such 
a step, a menu-command icon with a small red X appears in the History palette. 

When you replay steps, they are exactly the same as the steps that you performed 
previously; you can’t modify the steps as you replay them. For example, if you 
previously changed the color of a table cell to be red, applying that step to another 
table cell changes that cell’s color to red as well; you can’t specify a different color 
when you apply the set-background-color step to a new image. 

Repeating steps 

To repeat the last step you performed, use the Edit > Repeat command. The 
name of this command changes in the Edit menu to reflect the last step you 
performed; for example, if you’ve just typed some text, the command name is 
Repeat Typing. (You can’t use the Repeat command immediately after an Undo 
or Redo operation.) 

To repeat steps other than the most recent one, or to repeat multiple steps at once, 
use the History palette. 

To repeat one step: 

In the History palette, select the step and click the Replay button. The step is 
replayed, and a copy of it appears in the History palette. 

To repeat a series of adjacent steps: 

1 Select steps in the History palette by doing one of the following: 

• Drag from one step to another. 

• Select one step, then Shift-click the step at the other end of the series of steps. 

2 Click Replay. 

The steps are replayed in order, and a new step, labeled Replay Steps, appears in 
the History palette. 
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To repeat non-adjacent steps: 

1 Select a step, then Control-click (Windows) or Command-click (Macintosh) 
other steps. 

2 Click Replay. 

The steps are replayed in order, and a new step, labeled Replay Steps, appears in 
the History palette. 

Note that when you replay steps, the steps that are played are the selected steps, 
not necessarily the step currently pointed to by the thumb. 

Applying steps to other objects 

You can apply a set of steps from the History palette to any object in the 
Document window. 


To apply History palette steps to a new object: 

1 Select the object. 

2 Select the relevant step or steps in the History palette, then click Replay. 

If you select multiple objects in a document and then apply steps to them from 
the History palette, the objects are treated as a single selection. You can’t select five 
images, for example, and apply the same size change to each of them all at once. 

To apply a series of steps to each object in a set of objects, make sure that the last 
step in the series selects the next object in the set. For example, here’s a procedure 
for setting the vertical and horizontal spacing of a series of images: 


To set the vertical and horizontal spacing of a series of images: 

1 Start with a document in which each line consists of a small image (such as a 
graphical bullet) followed by text. The goal is to set the images off from the text 
and from the other images above and below them. 

2 Select the first image. 

3 In the Property inspector, click the Expand button (the arrow in the lower right 
corner) if necessary to see all of the image properties. 

4 Enter numbers in the V Space and H Space text fields to set the image’s 
spacing. 

5 Click the Document window’s title bar (rather than clicking inside the 
document window) to bring keyboard focus back to the document window. 

6 Press the Left Arrow key to move the insertion point to the left of the image. 
Then press the Down Arrow key to move the insertion point down one line, 
leaving it just to the left of the second image in the series. Then press 
Shift+Right Arrow to select that second image. 

Note Do not select the image by clicking it, or you won't be able to replay the steps. 


100 Chapter 3 



7 Select the steps in the History palette corresponding to changing the image’s 
spacing and selecting the next image. Click the Replay button to replay 
those steps. 

The current image’s spacing changes, and the next image is selected. 

8 Continue to click Replay until all the images are spaced correctly. 

To apply steps to an object in another document, use Copy Steps; see “Copying 
and pasting steps between documents” on page 101. 

Copying and pasting steps between documents 

Each open document has its own history of steps. You can copy steps from one 
document and paste them into another. 

To reuse steps from one document in another document: 

1 Start from the document containing the steps you want to reuse. 

2 Select the steps in the History palette. 

jfe] 3 Click the History palette’s Copy Steps button to copy those steps. 

4 Open the other document. 

5 Place the insertion point where you want it, or select an object to apply 
the steps to. 

6 Choose Edit > Paste to paste the steps. 

The steps are played back as they’re pasted into the document’s History palette. 
The History palette shows them as only one step, called Paste Steps. 

Note: Copy Steps is a different command from Copy. You can't use the Edit menu's Copy 
command to copy steps, though you do use Edit > Paste to paste them. 

Closing a document clears its history. If you will want to use steps from a 
document after that document is closed, copy the steps with Copy Steps (or save 
them as a command; see “Creating new commands from history steps” on 
page 102) before you close the document. 

Be careful when copying steps that include a Copy or a Paste command: 

• Don’t use Copy Steps if one of the steps is a Copy command; attempting to 
Paste such steps may not behave as you expect. 

• You can’t paste steps that include a Paste command but don’t include a 
preceding Copy command. 

If you paste steps into a text editor or into the HTML Source inspector, they 
appear as JavaScript code. This can be useful for learning to write your own 
scripts. For more information on using JavaScript in Dreamweaver, see 
“Extending Dreamweaver: Basics” on page 398. 
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Creating new commands from history steps 

You can save a set of history steps as a named command, which then becomes 
available in the Commands menu. 

Create and save a new command if there’s any chance you’ll want to use a given 
set of steps again in the future, especially if you want to use those steps again the 
next time you launch Dreamweaver; saved commands are retained permanently 
(unless you delete them), while recorded commands and copied sequences of 
steps are not. 

You can edit the names of commands that you’ve placed in the Commands menu, 
and you can delete them from the Commands menu, using Edit Command List. 
Note that it is more complicated to edit and delete commands that are built in to 
the Commands menu (that is, commands that you didn’t explicitly add); see 
“Customizing Dreamweaver menus” on page 386. 

To create a command: 

1 Select a step or set of steps in the History palette. 

2 Click the Save As Command button, or choose Save As Command from the 
History palette’s context menu. 

3 Enter a name for the command and click OK. 

The command appears in the Commands menu. 

Note: The command is saved as a JavaScript file in your Dreamweaver/Configuration/ 
Commands folder. 

To use a saved command: 

1 Select an object to apply the command to, or place the insertion point where 
you want it. 

2 Choose the command from the Commands menu. 

To edit the names of commands in the Commands menu: 

1 Choose Commands > Edit Command List. 

2 Select a command to rename and enter a new name for it. 

3 Click Close. 

To delete a name from the Commands menu: 

1 Choose Commands > Edit Command List. 

2 Select a command. 

3 Click Delete, then click Close. 
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Recording commands 

Dreamweaver allows you to record a temporary command for short-term use. The 
main differences between this approach and playing back steps from the History 
palette (see “Repeating steps” on page 99) are as follows: 

• The steps are recorded as you perform them, so you don’t have to select them in 
the History palette. 

• During recording, Dreamweaver prevents you from performing nonrecordable 
mouse motions (such as clicking to select something in a window, or dragging a 
page element to a new location). 

• If you switch to another document while recording, Dreamweaver doesn’t 
record the changes you make in the other document. Look at the pointer to 
determine whether you’re recording or not at any given moment. 

Dreamweaver retains only one recorded command at a time; as soon as you start 
recording a new command, the old one is lost. To save a new command without 
losing a recorded one, save the command from the History palette; see “Creating 
new commands from history steps” on page 102. 

Once you’ve recorded a command, you can save it (if you like) using the 
History palette. 


To temporarily record a series of frequently used steps: 


1 Choose Commands > Start Recording, or press Control+Shift+X (Windows) 
or Command+Shift+X (Macintosh). 



The pointer changes to indicate that you’re recording a command. 

2 When you’re done recording, choose Commands > Stop Recording, or press 
Control+Shift+X (Windows) or Command+Shift+X (Macintosh). The pointer 
changes back. 


To play back a recorded command: 

Choose Commands > Play Recorded Command, or press Control+P (Windows) 
or Command+P (Macintosh). 


To save a recorded command: 

1 Choose Commands > Play Recorded Command to play the command back. 
A step named Run Command appears in the History palette’s step list. 

2 Select the Run Command step and click the Save As Command button. 

3 Enter a name for the command and click OK. 

The command appears in the Commands menu. 
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Using visual guides in the design process 

Dreamweaver has many features that help you design documents and predict how 

they will appear in browsers. You can do the following: 

• Instantly snap the Document window to the desired window size to see how 
the elements fit on the page. See “Resizing the Document window” on page 66. 

• Use rulers to provide a visual cue for positioning and resizing layers or tables. 

• Use a tracing image as the page background to help you duplicate a design 
created in an illustration or image editing application. 

• Use the grid for precise positioning and resizing of layers. Grid marks on the 
page help you align layers, and when snapping is enabled, layers automatically 
snap to the closest grid point when moved or resized. (Other objects, such as 
images and paragraphs, do not snap to the grid.) Snapping works regardless of 
whether the grid is visible. See “Snapping layers to the grid” on page 247. 


Displaying rulers 

Rulers can be displayed on the left and top borders of the page in pixels, inches, 
or centimeters. 

To change ruler settings, choose from the following options: 

• To toggle rulers on and off, choose View > Rulers > Show. 

• To change the origin, drag the zero point onto the page. To reset the origin to 
its default position, choose View > Rulers > Reset Origin. 

• To change the unit of measure, choose Pixels, Inches, or Centimeters from the 
View > Rulers submenu. 
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Using a tracing image 

Use a tracing image as a guide to re-create a page design that was mocked up in a 
graphics application. A tracing image is a JPEG, GIF, or PNG image that is placed 
in the background of the Document window. You can hide the image, set its 
opacity, and change its position. 

The tracing image is visible only in Dreamweaver. It is never visible when you 
view the page in a browser. When the tracing image is visible, the background 
image and color are not visible in the Document window; however, they will be 
visible when the page is viewed in a browser. 

To place a tracing image in the Document window: 

1 Choose View > Tracing Image > Load. 

2 In the dialog box that appears, select an image file and click Select (Windows) 
or Choose (Macintosh). 

3 The Page Properties dialog box appears. Specify the transparency for the image 
by dragging the Image Transparency slider, then click OK. 

You can also choose a tracing image or change the transparency of the current 
tracing image at any time from the Page Properties dialog box by choosing 
Modify > Page Properties. 

To toggle the display of the tracing image: 

Choose View > Tracing Image > Show. 

To change the position of a tracing image, do one of the following: 

• To specify the position of the tracing image, choose View > Tracing Image > 
Adjust Position, then enter X and Y coordinate values. 

• To move the image 1 pixel at a time, use the arrow keys 

• To move the image 5 pixels at a time, press Shift and the arrow keys 

• To move the tracing image back to the upper left corner of the document 
window (0,0), choose View > Tracing Image > Reset Position. 

To align the tracing image to a selected object: 

1 Select an object in the Document window. 

2 Choose View > Tracing Image > Align with Selection. 

The upper left corner of the tracing image is aligned with the upper left corner 
of the selected object. 
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About interactivity and animation 

Many Web pages are static, containing only text and images. Dreamweaver allows 
you to go beyond static pages, using interactivity and animation to capture 
visitors’ interest. Give visitors feedback as they move and click; demonstrate 
concepts; validate form data without contacting the server—in short, let visitors 
see and do more without leaving the page. 

There are several ways to add interactivity and animation to your pages 
using Dreamweaver: 

• Use behaviors to perform tasks in response to specific events, such as 
highlighting a button when the visitor passes the pointer over it, validating a 
form when the visitor clicks the Submit button, or opening a second browser 
window when the main page is finished loading. See “Using Behaviors” on 
page 297. 

• Use timelines to create animations that do not require plugins, ActiveX 
controls, or Java. Timelines use dynamic HTML to change the position of a 
layer or the source of an image over time or to call behavior actions 
automatically after the page has loaded. See “About timelines” on page 253. 

• Use Shockwave movies, Flash movies, Java applets, or any other ActiveX 
controls or Netscape plugins in a page to add self-contained movies, interactive 
navigation schemes, and other multimedia elements to your page. See 
“Inserting Media” on page 281. 
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Viewing and editing HEAD content 

HTML files are made up of two main sections: the HEAD section and the BODY 
section. The BODY section is the part of the document that is visible to your site’s 
visitors in a browser window (and to you in the Document window in 
Dreamweaver). The HEAD section is mostly invisible to visitors (and in 
Dreamweaver), except for the text tagged TITLE, which appears in the title bar of 
both the browser and the Document window and is used as the label for 
bookmarks to the document. Give a title to every page you create. 

The HEAD section contains other important information in addition to the 
document title, including the document type, the language encoding, JavaScript 
and VBScript functions and variables, and keywords and content indicators for 
search engines. You don’t need to provide all of these elements for every page; you 
might, for example, provide keywords and content indicators for your home page 
only. You can view the elements in the HEAD section using the View menu or the 
HTML Source inspector. 


To view elements in the HEAD section of a document: 

Choose View > Head Content. For each element of the HEAD content, an icon 
appears at the top of the Document window. 

To insert elements into the HEAD section of a document: 

1 Do one of the following: 

• Choose Head from the pop-up menu at the top of the Object palette and click 
one of the buttons in the Object palette. 

• Choose an item from the Insert > Head submenu. 

2 Enter options for the element in the dialog box that appears or in the 
Property inspector. 
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To edit elements in the HEAD section of a document: 

1 Click one of the icons in the HEAD section to select it. 

2 Set or modify the properties of the element in the Property inspector. 

For information about the properties of specific HEAD elements, see the following 
topics in Dreamweaver Help: 

• META properties 

• Title properties 

• Keywords properties 

• Description properties 

• Refresh properties 

• Setting script properties 

• Base properties 

• Link properties 


108 Chapter 3 



4 



CHAPTER 4 

Linking and Navigation 


Once you’ve established a local site in which to store your Web site documents, 
and created HTML pages, you’ll want to create connections from your documents 
to other documents or file types. To see how to set up a local site, see “Creating a 
local site” on page 78. 

Using Dreamweaver, there are several ways to set up hypertext links to documents, 
images, multimedia files, or downloadable programs. You can establish links to 
any text or image anywhere within a document, including text or images located 
in a heading, list, table, layer, or frame. 

With Dreamweaver you can easily create the following types of links from text and 
graphic images: 

• Internal links, linking documents in the same Web site. 

• External links, linking to documents outside of a local Web site. 

• E-mail links that open an e-mail form. 

• Links to named anchors that allow the visitor to jump to a particular area on 
the same Web page or to one on a different page. 

For a visual representation of your site structure, use the Site Map feature. In the 
site map you can add new documents to your site, create document links, remove 
documents, and check links to dependent files. See “Viewing the site structure” on 
page 127. 
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About document locations and paths 

Understanding the file path between the document you’re linking from and the 
document you’re linking to is essential to creating links. 

Each Web page has a unique address, called a Uniform Resource Locator (URL). 
(For detailed information on URLs, see the World Wide Web Consortium’s page 
on naming and addressing.) However, when you create a local link (a link from 
one document to another on the same site), you generally don’t specify the entire 
URL of the document you’re linking to; instead, you specify a relative path from 
the current document or from the site’s root folder. The following are the three 
types of document paths: 

• Absolute paths (such as http://www.macromedia.com/support/dreamweaver/ 
contents.html). 

• Document-relative paths (such as dreamweaver/contents.html). 

• Root-relative paths (such as /support/dreamweaver/contents.html). 

Using Dreamweaver, you can easily select the type of document path to create for 
your links. See “Linking to a document” on page 115. 


About absolute paths 

Absolute paths provide the complete URL of the linked document, including the 
protocol to use (usually http:// for Web pages). For example, http:// 
www.macromedia.com/support/dreamweaver/contents.html is an absolute path. 
You must use an absolute path to link to a document on another server. You can 
also use absolute-path links to link pages in a site located on your local computer 
(such as for a Web presentation). This approach is discouraged, however, as your 
links would break causing you files not to open if you transfer the files to another 
location or change the file structure within your site. 
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About document-relative paths 

Document-relative paths are the most appropriate paths to use for local links in 
most Web sites. They’re particularly useful when the current document and the 
linked-to document are in the same folder and are likely to remain together. You 
can also use a document-relative path to link to a document in another folder, by 
specifying the path through the folder hierarchy from the current document to the 
linked document. When you specify a document-relative path, you leave out the 
part of the absolute URL that is the same for both the current document and the 
linked document, providing only the portion of the path that differs. 

To link to another file in the same folder as the current document, simply provide 
the file name to link to. To link to a file in a subfolder of the current document’s 
folder, provide the name of the subfolder, then a forward slash, and then the file 
name to link to. To link to a file in the parent folder of the current document’s 
folder, precede the file name with ../ (where .. means “up one level in the folder 
hierarchy”). 

For example, suppose you have a site with this structure: 
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To link from contents.html to other files: 

• To link from contents.html to hours.html (both files are in the same folder), 
the file name is the relative path: hours.html. 

• To link to tips.html (in the subfolder named resources), use the relative path 
resources/tips.html. 

Each forward slash (/) represents moving down one level in the folder 
hierarchy. 

• To link to index.html (in the parent folder, one level above contents.html), use 
the relative path ../index.html. 

Each ../ represents moving up one level the folder hierarchy. 

• To link to catalog.html (in a different subfolder of the parent folder), use the 
relative path ../products/catalog.html. 

The ../ moves up to the parent folder; the products/ moves down into the 
products subfolder. 

Note: Always save a new file before creating a document-relative path; a document-relative 
path is not valid without a definite starting point. If you create a document-relative path 
before saving the file, Dreamweaver temporarily uses an absolute path beginning with file:/ 
/ until the file is saved; when you save the file, Dreamweaver converts the file:// path into a 
relative path. 

When you move a group of files as a group, so that they keep the same relative 
paths between them—for example, when you move an entire folder, so that all the 
files inside that folder retain the same relative paths to each other—you don’t need 
to update document-relative links between those files. When you move an 
individual file that contains document-relative links, however, or an individual file 
that’s linked to by a document-relative link, you do need to update those links. (If 
you move or rename files using the Site window, Dreamweaver helps you update 
all relevant links.) 
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About root-relative paths 

Root-relative paths provide the path from the site’s root folder to a document. 

Note: If you understand the strengths and limitations of root-relative paths, they can be 
useful, but if you're not familiar with root-relative paths, document-relative paths are 
recommended. 

A root-relative path begins with a leading forward slash, which stands for the site 
root folder. For example, /support/tips.html is a root-relative path to a file 
(tips.html) in the support subfolder of the site’s root folder. 

A root-relative path often provides the best way to specify links in a Web site in 
which you need to frequently move HTML files from one folder to another. 
When you move a document that contains root-relative links, you don’t need to 
change the links; for example, if your HTML files use root-relative links for 
dependent files (such as images), then if you move an HTML file, its dependent- 
file links are still valid. However, when you move or rename the documents linked 
to with root-relative links, you do need to update those links, even if the 
documents’ paths relative to each other haven’t changed. For example, if you move 
a folder, all root-relative links to files within that folder must be updated. (If you 
move or rename files using the Site window, Dreamweaver helps you update all 
relevant links.) 

Define a local site in Dreamweaver by choosing a local root folder to serve as 
the equivalent of the document root on a server. (See “Creating a local site” on 
page 78.) Dreamweaver uses this folder to determine the root-relative paths 
to files. 

Root-relative links are interpreted by servers, not by browsers, so if you open a 
local page that uses root-relative links in your browser (without using Preview in 
Browser from within Dreamweaver), the links don’t work. When you use the 
Preview in Browser feature to preview a document that uses root-relative links, 
Dreamweaver temporarily converts those links (in the previewed file only) to use 
absolute file:// paths. However, you can preview only one page at a time that 
uses root-relative links—if you follow a link from the previewed page, the new 
page’s root-relative links are not converted, and the browser can’t follow such 
links. Previewing pages in framesets that use root-relative links results in 
similar problems. 


To preview a set of pages that use root-relative links, do one of the following: 

• Put the files on a remote server and view them from there. 

• (Windows only) Choose Edit > Preferences, and in Preview in Browser 
preferences, select Preview Using Local Server. To use this option, you must be 
running a Web server on your local computer. 
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Creating links 

The HTML tag for creating a hypertext link is called an anchor tag. Dreamweaver 
creates an anchor tag for objects, text, or images you create links from. For 
example, if in the Document window you selected the text Home Page, then 
created a link to a file named home.htm, the HTML source code for the link 
would look like this: 

<a href="home.htm">Home Page</a> 

Before creating links, be sure you understand how document-relative paths, root- 
relative paths, and absolute paths work. See “About document locations and 
paths” on page 110. 

You can create several types of links in a document: 

• A link to another document or file, such as a graphic, movie, or sound file. 

• A named anchor link, which jumps to a specific location within a document. 

• An e-mail link, which opens an e-mail form with the recipient’s address already 
filled in. 

• A null link, or script link, which enables you to attach behaviors to an object or 
to create a link that executes JavaScript code. 

Using Dreamweaver, there are several ways to easily create links between 
documents: 

• Use the Site Map Window to view, create, change, or delete links. 

• Use Modify > Make Link to select a file to link to. 

• Use the Property inspector to link to a file, by using the folder icon to browse 
to and select a file, using the point-to-file icon to select a file, or typing the path 
of the file. 

• Use the context menu, choose Make Link, then select a file to link to. 
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Linking to a document 

Use the Property inspector to link an image, an object, or text to another 
document, or to link to a particular section of a document. 

This section provides information on just one way to link documents; for 
information on using other techniques for creating links, see “Linking documents 
using the point-to-file icon” on page 116 and “Creating and modifying links in 
Site Map view” on page 132. 

To create links between documents: 

1 Select text or an image in the Document window. 

2 Open the Property inspector (Window > Properties) and do one of 
the following: 
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• Click the folder icon to the right of the Link field to browse to and select a Hie. 

The path to the linked document appears in the URL field. Use the Relative To 
pop-up menu in the Select HTML File dialog box to select whether the path is 
document relative or root relative, then click Select. 

Note: When you change the path type in the Relative To field, Dreamweaver sets the 
selection as the default path type for any future links until you change the selection. 

• In the Link field, type the path and file name of the document. 

To link to a document in your site, enter a document-relative or root-relative 
path. To link to a document outside your site, enter an absolute path including 
the type of protocol (such as http://). 

3 Select a location in which the document will open. 

To make the linked document appear somewhere other than in the current 
window or frame, select an option from the Target pop-up menu on the 
Property inspector. 

For information about targeting frame documents, see “Controlling frame 
content with links” on page 278. 
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Linking documents using the point-to-file icon 

Use the point-to-file icon to create a link to another open document, to a 
document or image in the Site window, or to a named anchor. 

To link to a document using the point-to-file icon in the Property inspector: 

1 Select text or an image in the Document window. 

2 Drag the point-to-file icon at the right of the Link field in the Property 
inspector and point to another open document, a visible anchor in an open 
document, or a document in the Site window. 

The Link field updates to show the link. 

3 Release the mouse button. 
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Dragging the point-to-file icon from the Property inspector to a file in the 
Site window. 
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To create a link from a selection in an open document: 

1 Select text in the Document window. 

2 Shift-drag from the selection. 

The point-to-file icon appears as you drag. 

3 Point to another open document, a visible anchor in an open document, or a 
document in the Site window. 

4 Release the mouse button. . 



[|a|x| 

File Edit View Site Window 
Help 



scaal 

d 

Remote Site 

Local Folder 



f—^ C:\sites\scaal_site 


B images 


a fit 

buttons _ 


a 

black line 


i 

coffe_wej- 


a 

flash plac 


a 

flash plat 


a 

flash plat 


a 

flash plat 


B 

flash plaj 


a 

gifts blac 


a 

gifts leftlii 


a 

qifts leftlii 


a 

aifts linec 


a 

home line 


a 

imq franc 


a 

img_franc 


a 

imq qifts 


a 

img_gifts_ 


a 

imq qifts 





bodsxubiexirxidxtabie: 429x410» 28K / 8 sec tfgi EU dl C£) [> O > 1 local items selected totalling 145! 


Shift-dragging the point-to-file icon from text in the Document window to a file in 
the Site window. 
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To create a link from a file in the site map: 

1 Select an HTML file in the site map. 

The point-to-file icon appears next to the file. 

2 Drag the point-to-file icon and point to another open document, a visible 
anchor in an open document, or a document in the Site window. 

3 Release the mouse button. 



Dragging the point-to-file icon from a selected file in the Site Map view to a file in 
the Site Files view of the Site window. 


For information about displaying a site map, see “Viewing local sites” on page 81. 
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Linking to a named anchor 

Named anchors set position placemarkers in a document. Use named anchors to 
link to a particular area in the current document or in a different document. 
Named anchors are often used to jump to a specific topic or to the top of a 
document, quickly taking your visitor to the selected position. 

Creating a link to a named anchor is a two-step process. First, create a named 
anchor, then create a link to the named anchor. 

Note: Named anchors are case sensitive. 


To create a named anchor: 

1 In the Document window, place the insertion point where you want the 
named anchor. 

2 Do one of the following: 

• Choose Insert > Named Anchor. 

• Press Control+Alt+A (Windows) or Command+Option+A (Macintosh). 

• In the Invisibles panel of the Object palette, click the Anchor button. 

3 In the Anchor Name field of the Insert Named Anchor dialog box, type a name 
for the anchor. 

If the anchor marker doesn’t appear at the insertion point location, choose 
View > Invisible Elements. 

To link to a named anchor: 

1 In the Document window, select text or an image to create a link from. 

2 In the Link field of the Property inspector, type a number sign (#) and the 
name of the anchor. For example: 

• To link to an anchor named “top” in the current document, type #top. 

• To link to an anchor named “top” in a different document in the same folder, 
type filename.html#top. 
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To link to a named anchor using the point-to-file method: 

1 Choose View > Invisible Elements to make the anchor visible. 

2 Select text or an image in the Document window. 

3 Do one of the following: 

• Click the point-to-file icon to the right of the Link field in the Property 
inspector and drag it to the anchor you want to link to: either an anchor within 
the same document or an anchor in another open document. 

• Shift-click in the Document window and drag to the anchor you want to 
link to: either an anchor within the same document or an anchor in another 
open document. 

Creating an e-mail link 

An e-mail link opens a new message window (using the mail program associated 

with the user’s browser) when clicked. In the e-mail message window, the To field 

is automatically updated with the address specified in the e-mail link. 

To create an e-mail link using the Insert E-Mail Link command: 

1 In the Document window, position the insertion point where you want the 
e-mail link to appear, or select the text you want to appear as the e-mail link. 
Then do one of the following: 

• Choose Insert > E-Mail Link. 

• In the Common panel of the Object palette, select Insert E-Mail Link. 

2 In the Text field of the Insert E-Mail Link dialog box, type or edit the text to 
appear in the document as an e-mail link. 

3 In the E-Mail field, type the e-mail address mail should be addressed to. 

4 Press OK. 

To create an e-mail link using the Property inspector: 

1 Select text, an image or an image in the Document window. 

2 In the Link field of the Property inspector, type mailto: followed by an 
e-mail address. 
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Creating null and script links 

The most familiar kinds of links are those to documents and named anchors 
(described in “Linking to a document” on page 115 and “Linking to a named 
anchor” on page 119, respectively), but there are other types of links as well. 

A null link is an undesignated link. Use null links to activate objects or text on a 
page. Once the text or object is active, you can attach a behavior to it to swap an 
image or to display a layer when the pointer is moved over the link. For 
information about attaching behaviors to objects, see “Attaching a behavior” on 
page 301. 

Script links execute JavaScript code or call a JavaScript function and are useful for 
giving visitors additional information about an item without leaving the current 
Web page. Script links can also be used to perform calculations, form validations, 
and other processing tasks when a visitor clicks a specific item. 

To create a null link: 

1 Select text, an image, or an object in the Document window. 

2 In the Property inspector, type a number sign (#) in the Link field. 

To create a script link: 

1 Select text, an image, or an object in the Document window. 

2 In the Link field of the Property inspector, type javascript: followed by some 
JavaScript code or a function call. 

For example, typing javascript:alert(‘This feature is not implemented’) in the 
Link field produces a link that displays a JavaScript alert box with the message 
This feature is not implemented. 

Note Because the JavaScript code appears between double quotation marks (as the 
value of the HREF attribute), you must use single quotation marks in the script code or 
"escape" any double quotation marks by preceding the double quotes with a backslash 
(for example, V'This feature is not implementedV). 
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Creating jump menus 

A jump menu is a pop-up menu of options that link to a document or file. You 
can create links to documents in your Web site, links to documents on other Web 
sites, e-mail links, links to graphics, or links to any file type that can be opened in 
a browser. 

There are three basic components a jump menu can contain: 

• A menu selection prompt, such as a category description for the menu items, or 
instructions, such as “Choose one:”. 

• A list of linked menu items: a user clicks an option and a linked document or 
file opens. 

• A Go button. 

Once a jump menu item has been selected, there is no way to reselect the item if 
you navigate back to that page, or if the Open URL In field specifies a frame. 
There are two ways to work around this problem: 

• Use a menu selection prompt, such as a category, or a user instruction, 
such as “Choose one:”. A menu selection prompt is reselected after each 
menu selection. 

• Use a Go button, which allows a user to revisit the currently selected link. 
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Inserting a jump menu 


To create a jump menu: 

1 Choose Insert > Form Object > Jump Menu. 

The Insert Jump Menu dialog box appears. 

2 If you want to create a selection prompt, in the Text field of the Insert Jump 
Menu dialog box, type the text you want to appear to prompt the user. Under 
Options, select the Select First Item After URL Change checkbox, then click 
the plus (+) button to add a menu item. 

3 In the Text field of the Insert Jump Menu dialog box, type the text you want to 
appear in the menu list. 

4 In the When Selected, Go To URL field, select the file to open by doing either 
of the following: 

• Click Browse, then select the file to open. 

• Type the path of the file to open. 

5 In the Open URLs In pop-up menu, select a location in which the file will 
open, by doing one of the following: 

• Select Main Window to open the file in the same window 

• Select a frame in which the file will open 

Note If the frame you wish to target doesn't appear on the Target pop-up menu, exit the 
Insert Jump Menu dialog box, and name the frame. 

For information about naming a frame, see “Setting frame properties” on 
page 272. 

6 Under Options, choose from the following options: 

• To add a Go button, select the Insert Go Button After Menu checkbox. 

• To set up a selection prompt, select the Select First Item After URL 
Change checkbox. 

Note: Select only one option per jump menu. These options apply to an entire jump 
menu. 

7 To add additional menu items, click the plus (+) button, and repeat steps 2 
through 5 of this procedure. 

8 Click OK. 
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Editing Jump Menu items 

You can make changes to jump menu items in the Property inspector or the 
Behavior inspector. You can change the list order or the file an item links to, or 
you can add, delete, or rename an item. 

To change the location a linked file opens in, or to add or change a menu selection 
prompt, you must use the Behavior inspector. For information about how to use 
the Behavior inspector to edit a jump menu, see “Jump Menu” on page 316. 

To edit a Jump Menu item using the Property inspector: 

1 In the Property inspector, choose Window > Properties. 

2 In the Document window, click the Jump Menu object to select it. 

The List/Menu icon appears in the Property inspector. 

3 In the Property inspector, click the List Values button. 

4 Make changes to the menu items, then click OK. 

Creating navigation bars 

A navigation bar consists of an image, or a set of images, whose display changes 
based on the actions of a user. 

Before using the Insert Navigation Bar command, create a set of navigation bar 
images for the states of an image you want displayed. 

An image can have four states: 

• Up: the image that appears when the page initially loads. 

• Over: the image that appears when the pointer is rolled over an image. 

• Down: the image that appears when an image is clicked. 

• Down and Over: the image that appears when the pointer is rolled over the 
image after the image has been clicked. 

The following example demonstrates how different states of a button image might 
be displayed: when a user views the home page, the home page image button is 
darkened, and the other buttons of the navigation bar are in their normal or up 
state. On the home page, the user moves the pointer over the Our Story button; 
an image a lighter shade of the same color displays (that is, the button is 
highlighted), and the user clicks the Our Story button. On the Our Story page, 
the Our Story button is darkened, and the home page image button is in its 
normal state. 

You can create a navigation bar, copy it to other pages in your site, and edit the 
page behaviors to show different states as pages are accessed. 
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Inserting a navigation bar 


To create a navigation bar: 

1 Do one of the following: 

• Choose Insert > Navigation Bar. 

• In the Common panel of the Object palette, select Insert Navigation Bar. 
The Insert Navigation Bar dialog box appears. 



2 In the Element Name field, type a name for the navigation bar element. 

Element names appear in the Nav Bar Elements list. You can use the up or 
down arrow button to arrange elements in the navigation bar. 

3 Select image state options (you must select an Up Image; other image states 
are optional): 

• In the Up Image field, click Browse to select the image to be displayed initially. 

• In the Over Image field, click Browse to select the image to be displayed when 
the user moves the pointer over the image. 

• In the Down Image field, click Browse to select the image to be displayed after 
the user clicks the image. 

• In the Over While Down Image field, click Browse to select the image to 
be displayed after the user clicks the image, then moves the pointer over 
the image. 
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4 In the When Clicked, Go To URL field, select a location in which the file will 
open by doing one of the following: 

• Select Main Window to open the file in the same window. 

• Select a frame in which the file will open. 

Note If the frame you wish to target doesn't appear on the Target pop-up menu, exit the 
Insert Navigation Bar dialog box, and name the frame. 

For information about naming a frame, see “Setting frame properties” on 
page 272. 

5 Select image loading options: 

• Preload Images downloads the images when the page loads. If this option 
isn’t selected, there may be a delay when the user moves the pointer over the 
rollover image. 

• Select Show “Down Image” Initially to display the selected element in its down 
state when the page is displayed. For example, when the home page loads, the 
home page button should be in its down state. 

When this option is selected, an asterisk appears after the element in the Nav 
Bar Elements list. 

6 Under Insert, select from these options: 

• To insert the navigation bars elements vertically or horizontally in the 
document, use the Insert pop-up menu. 

• To insert the navigation bar elements in a table, select the Use Tables checkbox. 

7 Click the plus (+) button to add another element to the navigation bar, then 
follow steps 2 through 6 to set the state for that element. 

8 Click OK. 
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Modifying a Navigation Bar 

Once you create a navigation bar for a document, you can add or remove images 
from the navigation bar by using the Modify Navigation Bar command. You can 
use this command to change an image or set of images, to change which file opens 
when a button is clicked, to select a different window in which to open a file, and 
to reorder the position of the images. 

To modify a navigation bar: 

1 Choose Modify > Navigation Bar. 

2 In the Nav Bar Elements list, select the element you want to edit. 

3 Make your edits, then click OK. 

Viewing the site structure 

Use the site map to view a local site as a visual map of linked icons, to add new 
files to a site, or to add, modify or remove links. The Site Map view is ideal for 
storyboarding or laying out a site structure. You can quickly set up the entire 
structure of the site and then create a printed image of the site map. 

Note: The Site Map view applies to local sites only. If you want to create a map of a remote 
site, copy the contents of the remote site to your local disk. 

To view a site map, do one of the following: 

• Choose Window > Site Map to open the Site window. 

• In the Site window, click the Site Map button. 

The site’s home page is the starting point of the map. If Dreamweaver can’t 
determine which page in the current site is the home page, the Site Definition 
dialog box opens to the Site Map Layout panel, prompting you to select the 
correct page. 

The site map shows HTML files and other page content as icons. Links are 
displayed in the order in which they are encountered in the HTML source code. 

5 • Text displayed in red indicates a broken link. 

© • Text displayed in blue and marked with a globe icon indicates a file on another 

site or a special link (such as an e-mail or script link). 

J • A green check mark indicates a file checked out by you. 

7 • A red check mark indicates a file checked out by someone else. 

0 • A lock icon indicates a file that is read-only (Windows) or locked (Macintosh). 
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By default, the site map displays the site structure two levels deep, starting from 
the current home page. Click the plus (+) and minus (-) signs (Windows) or the 
expander arrow (Macintosh) next to a page to show or hide pages linked below the 
second level. 
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By default, hidden files and dependent files are not displayed in the site map. 
Hidden files are HTML files marked as hidden. Dependent files are non-HTML 
page content such as images, templates, Shockwave files, or Flash files. See 
“Modifying the site map layout” on page 129 and “Showing and hiding site map 
files” on page 133. 
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Modifying the site map layout 

Use the Site Map Layout options to customize the appearance of your site map. 

You can specify the home page, the number of columns displayed, and whether to 

show hidden and dependent files. 

To modify the site map layout: 

1 Open the Site Definition dialog box using one of these methods: 

• Choose Site > Define Sites and then click Edit. Select Site Map Layout in the 
Category list on the left. 

• Choose View > Layout (Windows) or Site > Site Map View > Layout 
(Macintosh). 

2 Click the folder icon to select a home page for the site, or type a file path in the 
Home Page field. 

If you don’t specify a home page—and Dreamweaver cannot find a file called 
index.html or index.htm at the root—Dreamweaver will prompt you to select a 
home page when you open the site map. 

3 Choose from the Column options: 

• In the Number of Columns field, type a number to set the number of pages to 
display per row in the site map window. 

• In the Column Width field, type a number to set the width in pixels of the site 
map columns. 

4 Under Icon Labels, select whether the name displayed under the document 
icons in the Site Map will be represented as file names or as page titles. 

5 Under Options, select which files to display in the site map: 

• Choose Display Files Marked as Hidden to display HTML files that are 
marked as hidden in the site map. If a page is hidden, its name and links are 
displayed in italics. For information about hiding files, see “Showing and 
hiding site map files” on page 133. 

• Choose Display Dependent Files to show all dependent files in the site’s 
hierarchy. A dependent file is an image or other non-HTML content that is 
loaded by the browser when the main page is loaded. 
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Working with pages in the site map 

When working in the site map, you can select pages, open a page for editing, add 

new pages to the site, create links between files, and change the page title. 

To select multiple pages in the site map, do one of the following: 

• Press Shift-click to select multiple pages. 

• Starting from a blank part of the view, drag around a group of files to 
select them. 

• Press Control-click (Windows) or Command-click (Macintosh) to select 
nonadjacent pages. 

To open a page for editing, do one of the following: 

• Double-click the file. 

• Select the file and choose File > Open Selection (Windows) or Site > Open 
(Macintosh). 

To add an existing file to the site, do one of the following: 

• Drag a file from the Windows Explorer or the Macintosh Finder and drop it on 
a file in the site map. The page is added to the site, and a link is created between 
it and the file you dropped it on. 

• Select Site > Link to Existing File (Windows) or Site > Site Map View > Link to 
Existing File (Macintosh). 

To create a new file and add a link: 

1 Select an HTML file in the site map, then do one of the following: 

• Choose Site > Link to New File (Windows) or Site > Site Map View > Link to 
New File (Macintosh). 

• Choose Link to New File from the context menu. 

2 In the File Name field of the Link to New File dialog box, type a file name. 

3 In the Title field, type a page title for the file. 

4 In the Text of Link file, type the text of the link that connects the selected file to 
the new file. The link appears in the selected file. 

5 Click OK. 

The file is saved in the same folder as the selected file. If a new file is added to a 
hidden branch, the new file is also hidden. See “Showing and hiding site map 
files” on page 133. 


130 Chapter 4 



To modify the title of a page: 

1 Make sure the Show Page Titles option is selected. 

Choose View > Show Page Titles (Windows) or Site > Site Map View > Show 
Page Titles (Macintosh). 

2 Do one of the following: 

• Select a page and then click the title. When the title becomes an editable field, 
enter a new document title. 

• Select a page and then choose File > Rename (Windows) or Site > Rename 
(Macintosh). 

To change the home page, do one of the following: 

• In the Local Folder pane of the Site Window, click the file you want to change 
to the home page and choose Set as Home Page from the context menu. 

• Choose Site > New Home Page (Windows) or Site > Site Map View > New 
Home Page (Macintosh) to create a new home page. 

• Choose Site > Set as Home Page (Windows) or Site > Site Map View > Set as 
Home Page (Macintosh) to make an existing page the home page. 

To update the site map display after making changes: 

• Click anywhere in the Site Map window to deselect any files, then choose View 
> Refresh Local (Windows) or Site > Site Map View > Refresh Local 
(Macintosh). 
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Creating and modifying links in Site Map view 

You can modify the structure of the site in the site map by adding, changing 

and removing links. The site map is updated automatically to display the changes 

to the site. 

To add a link, do one of the following: 

• Drag a page from the Windows Explorer or the Macintosh Finder onto a page 
in the site map. 

• Select an HTML page and choose Site > Link to Existing File (Windows) or 
Site > Site Map View > Link to Existing File (Macintosh), or choose Link to 
Existing File from the context menu. 

• Select an HTML page in the site map. The point-to-hle icon appears. Click 
and drag the icon to the object you want to link to: either a file in the File View, 
an open Dreamweaver document on the desktop, or a named anchor in a 
document open on the desktop. See “Linking documents using the point-to- 
file icon” on page 116. 

To change a link: 

In Site Map view, select the page whose link you’re changing, and choose Site > 

Change Link (Windows) or Site > Site Map View > Change Link (Macintosh). 

Browse to the file or type a URL. 

To remove a link, do one of the following: 

• Select the page in the site map and choose Site > Remove Link (Windows) or 
Site > Site Map View > Remove Link (Macintosh). 

• Select the page in the site map and choose Remove Link from the 
context menu. 

To open the source of a link: 

1 Select a file in the site map. 

2 Choose Site > Open Source of Link (Windows) or Site > Site Map View > 
Open Source of Link (Macintosh). 

The Property inspector and the source file containing the link are opened. The 
link is highlighted. 
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Showing and hiding site map files 

You can modify the layout of the site map to show or hide hidden and dependent 
files. This is useful when you want to emphasize key topics or content and 
deemphasize less important material. 

Before you can hide or display an HTML file, you must first mark it as hidden. 
When you hide a file marked as hidden, its links are also hidden. When you 
display a file marked as hidden, the icon and its links are visible in the site map 
view, but the names appear in italics. 

To mark files as hidden: 

1 In the site map, select one or more files. 

2 Choose View > Show/Hide Link (Windows) or Site > Site Map View > Show/ 
Hide Link (Macintosh). 

To show or hide files marked as hidden, do one of the following: 

• Choose View > Show Files Marked as Hidden (Windows) or Site > Site Map 
View > Show Files Marked as Hidden (Macintosh). 

• Choose View > Layout (Windows) or Site > Site Map View > Layout 
(Macintosh) to open the Site Definition dialog box and select the Display Files 
Marked as Hidden option. 

By default, dependent files are already hidden. You can choose whether to show 
them in the site map. 

To show dependent files, do one of the following: 

• Choose View > Show Dependent Files (Windows) or Site > Site Map View > 
Show Dependent Files (Macintosh). 

• Choose View > Layout (Windows) or Site > Site Map View > Layout 
(Macintosh) to open the Site Definition dialog box and select the Display 
Dependent Files option. 
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Viewing the site from a branch 

You can view the details of a specific section of a site by making a branch the focus 
of the site map. 


To view a different branch: 

Select the page you want to view and choose View > View as Root (Windows) or 
Site > Site Map View > View as Root (Macintosh). 

The site map is redrawn in the window as if the specified page were at the root of 
the site. The Site Navigation field above the site map displays the path from the 
home page to the specified page. Select any item in the path to view the site map 
from that level by clicking once. 

To expand and contract branches: 

Click the plus (+) and minus (-) signs (Windows) or the expander arrows 
(Macintosh) to expand or contract the branch. 


Saving the site map 

You can save the site map as an image and then view the image in (or print it 
from) an image editor. 

To create an image file of the current site map: 

1 From the site map, do one of the following: 

• Using Windows, in the Save Site Map dialog box, choose File > Save Site Map 
As. In the File Type pop-up menu, select .bmp or .png. 

• Using Macintosh, select Site > Site Map View > Save Site Map > Save Site Map 
As PICT or Site > Site Map View > Save Site Map > Save Site Map As JPEG. 

2 Choose a location, enter a name for the image, and click Save. 
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Managing links 

Dreamweaver can update links to and from a document whenever you move or 
rename it within a local site. This feature works best when you have your entire 
site (or an entire self-contained section of it) stored on your local drive. No 
changes are made to files on the remote site until you put or check in the local files 
on the remote server. 

To turn on link management in Dreamweaver: 

1 Choose Edit > Preferences, then select General. 

2 Select Always or Prompt from the Update Links pop-up menu and click OK. 

If you choose Always, Dreamweaver automatically updates all links to and from 
a selected document whenever you move or rename it. (For specific instructions 
on what to do when you delete a file, see “Changing a link sitewide” on 
page 136.) If you choose Prompt, Dreamweaver first displays a dialog box that 
lists all the files affected by the change. Click Update to update the links in 
these files, or click Don’t Update to leave the files unchanged. 

If check in/check out is enabled, Dreamweaver automatically attempts to check 
out the file before making any changes. 

To make the updating process faster, Dreamweaver can create a cache file in which 
to store information about all the links at your local site. This cache file is created 
when you select the Cache option in the Site Definition dialog box, and it is 
updated invisibly as you use Dreamweaver to add, change, or delete links to files 
on your local site. 

To create a cache file for your site: 

1 Choose Site > Define Sites. 

2 Select the site in the Define Sites dialog box, then click Edit. In the Local Info 
category, select the Cache checkbox under Link Management Options. 

To re-create a cache for your site: 

Choose Site > Recreate Site Cache. 

The first time you add, change, or delete links to files on your local site after 
launching Dreamweaver, Dreamweaver prompts you to load the cache. If you 
click Yes, the cache loads and all links to the file you just changed are 
automatically updated. If you choose No, the change is noted in the cache, but the 
cache does not load and links are not updated. 

It may take a few minutes for the cache to load on larger sites; most of this time is 
spent comparing the timestamps of the files on the local site with the timestamps 
recorded in the cache to see if the cache is out of date. If you have not changed any 
files outside of Dreamweaver, you can safely click Stop when the button appears. 
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Changing a link sitewide 

In addition to having Dreamweaver update links automatically whenever you 
move or rename a file, you can manually change all links (including mailto, FTP, 
null, and script links) to point somewhere else. You can use this option at any time 
(for example, you might have the words “this month’s movies” linked to /movies/ 
july.html throughout your site, and on August 1 you must change those links to 
point to /movies/august.html), but it’s particularly useful when you want to delete 
a file that other Hies link to. 

To change a link sitewide: 

1 Select a file in the Local pane of the Site window. 

2 Choose Site > Change Link Sitewide. 

3 In the dialog box that appears, click the folder icon to browse to and select a 
file, or in the Into Links To field, type the path and file name of a new file 
to link to. 

4 Click OK. 

Dreamweaver updates any documents that link to the selected file, making 
them point to the new file, using the path format that exists in the document 
(for example, if the old path was document relative, the new path is also 
document relative). 

After a link is changed sitewide, the selected file becomes an orphan (that is, no 
files on your local drive point to it). You can safely delete it without breaking any 
links at your local site. 

Note: Remember that because all changes are occurring locally, you will need to manually 
delete the corresponding file on the remote site and put or check in any files in which links 
were changed before visitors to your site will be able to see the changes. 

To change e-mail, FTP, null, or script links sitewide: 

1 Open the site map. 

2 Choose Site > Change Link Sitewide. 

3 In the Change Link Sitewide dialog box, enter the following information: 

• In the Change All Links To field, type the full name of the link you are 
changing. 

• In the Into Links To field, type the full name of the link you want to replace 
the link with. 

4 Click OK. 

For example, to update all the e-mail links that point to your old address, you 
might type mailto:juser@isp.com in the Change All Links To box, and type 
mailto:juser-interface@isp.com in the Into Links To box. 
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Testing links 

Links are not active in the Document window—that is, clicking a link does not 
take you to the linked document. You can open the file associated with a link in 
Dreamweaver if you want to edit the linked file, but you must test links in a 
browser. See “About testing your site” on page 166. 

To test links in a browser: 

Choose File > Preview in Browser or click F12. 

You must preview your pages in a browser to test your links. 

To open linked documents in Dreamweaver, do one of the following: 

• Select the link and choose Modify > Open Linked Page. 

• Press Control (Windows) or Command (Macintosh) and double-click the link. 
Note: The linked document must reside on your local disk. 


Attaching behaviors to links 

You can attach a behavior to any link in a document. Consider using the following 
behaviors when inserting linked elements into your documents. 

Set Text of Status Bar shows a message in the status bar at the bottom left of the 
browser window. For example, you can use this action to describe the destination 
of a link in the status bar instead of showing the URL associated with it. To see an 
example of a status message, move your pointer over any of the navigation buttons 
in the Dreamweaver Flelp Pages. See “Set Text of Status Bar” on page 324. 

Open Browser Window is used to open a URL in a new window. You can specify 
the properties of the new window, including its size, attributes (whether it is 
resizable, has a menu bar, and so on), and name. See “Open Browser Window” on 
page 317. 

Set Nav Bar Image behavior lets you change how a navigation bar behaves. Use 
this behavior to customize how the images in a navigation bar display. For 
example, when the pointer is over a button, the display of other images in the 
navigation bar or in the document change. See “Set Nav Bar Image” on page 321. 

Jump Menu Behavior is used to edit a jump menu. You can make changes to the 
menu list or the file linked to, or you can change the browser location of where a 
linked document opens. See “Jump Menu” on page 316. 
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Site Management 


Dreamweaver helps you organize the files in your local and remote sites. It allows 
you to easily duplicate the structure of your local site on a remote server, or to 
duplicate a remote Web site’s structure on your local system. The relative links that 
you create on your local site continue to work after you transfer files to the remote 
site, because the structure of the two sites is identical. 

You create a local site in Dreamweaver by creating a local root folder for the site 
(or by making an existing folder into the local root folder), using the New Site 
command; see “Creating a local site” on page 78. You then associate your local site 
with a remote server using the Define Sites command; see “Associating a remote 
server with a local site” on page 140. 

When you transfer files between local and remote sites, Dreamweaver maintains 
parallel file and folder structures between your local and remote sites. If needed 
folders do not yet exist in the site that the files are being transferred to, 
Dreamweaver automatically creates those folders. You can also synchronize the 
files between your local and remote sites; Dreamweaver copies files in both 
directions as necessary, and optionally removes unwanted files as appropriate. 

Dreamweaver includes a number of features for structuring a site and transferring 
files to and from a remote server. To make collaborative work on a Web site easier, 
you can check in and check out files on the remote server; others can then see 
when you’re working on a file and know not to edit that file at the same time. 
(Note, however, that Dreamweaver does not perform version control.) 
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Setting up a remote site 

Before you set up a remote site, create a local site (which you will then associate 
with the remote site). See “Creating a local site” on page 78. 

The next step in setting up a remote site is to determine where the site will be 
located—that is, what server the site will be served from. Your client, employer, or 
ISP probably has a server already set up to serve Web pages (whether Internet or 
intranet); ask a system administrator or your client for the name of that server, and 
find out how to transfer files to that server. 

In particular, determine whether to use FTP to connect to the server, or whether 
you can instead mount the server as a network-accessible disk drive from your 
desktop. If you’re connecting using FTP, find out the name of the FTP server. 

When you’ve gathered this information, use the Define Sites command to 
associate the server with your local site. If you encounter problems setting up your 
remote site, see “Troubleshooting remote site setup” on page 143. 

After you’ve set up a remote site, you can upload files to it, or download files from 
it if there are already files on the site. See “Using the check in/check out system” 
on page 147 and “Getting and putting files” on page 150. 


Associating a remote server with a local site 

After you’ve created a local site, use the Define Sites command to add or change 
associated remote server information and check in/check out preferences. 


To associate a remote server with an existing local site: 

1 Choose Define Sites from the current sites pop-up menu in the Site window, or 
choose Site > Define Sites. 
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2 A dialog box appears listing currently defined sites; select an existing site and 
click Edit. (If you have no currently defined sites, create a local site before 
proceeding; see “Creating a local site” on page 78.) 

3 In the Category list at the left, click Web Server Info. 
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4 Choose one of the following Server Access options: 

• Use None if you do not plan to upload your site to a server. Then click OK and 
skip the rest of this procedure. 

• Use Local/Network if your Web server is mounted as a network drive 
(Windows) or as an AppleTalk or NFS server (Macintosh), or if you are 
running a Web server on your local machine. Click the folder icon to browse to 
and select the folder where your site files are stored on the server. If you want 
the Remote pane of the Site window to update automatically as files are added 
and deleted, select the Refresh Remote File List Automatically option; for 
increased speed when copying files to the remote site, leave this option 
unselected. (To manually refresh the Site window at any time, click the Site 
window’s Refresh button.) Click OK and skip the rest of this procedure. 

Note: To manually refresh the Remote pane only, choose View > Refresh Remote in the 
Site window (Windows) or Site > Site Files View > Refresh Remote (Macintosh). 

• Use FTP if you connect to your Web server using FTP. 

5 Enter the host name of the FTP host to which you upload files for your 
Web site. 

Your FTP host name is the full Internet name of a computer system, such as 
ftp.mindspring.com or shelll6.ba.best.com. Enter the full host name without 
any additional text; in particular, don’t add a protocol name in front of the host 
name. For example: 

• Right: ftp.mindspring.com 

• Wrong: ftp://ftp.mindspring.com 

• Wrong: mindspring.com 

6 Enter the name of the host directory at the remote site where documents visible 
to the public are stored (also known as the site root). See “Determining the 
remote site’s root directory” on page 142. 

For example, the host directory for the dreamcentral site is public_html/. For 
other sites, the directory may be several levels down (such as www/public/docs/ 
or public_html/htdoc/), or it may be the login directory (in which case this 
field should be left blank). 

7 Enter the login name and password that you use to connect to the FTP server. 

Dreamweaver saves your password by default. Deselect Save if you prefer to be 
prompted for a password each time you connect to the remote server. 
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8 Select appropriate firewall options for your site: 

• Select the Use Firewall option if you are connecting to the remote server from 
behind a firewall. See “Setting Site FTP preferences” on page 146. 

• Some firewalls require use of passive FTP, which lets your local software set up 
the FTP connection rather than requesting the remote server to set it up. Select 
the Use Passive FTP option if your firewall configuration requires it. If you’re 
not sure whether to use this option, check with your local firewall 
administrator. 

9 Click OK. 

Determining the remote site's root directory 

The host directory you specify in the Define Sites dialog box should be the same 
as the root folder for the remote site. If the structure of your remote site doesn’t 
match the structure of your local site, your files are uploaded to the wrong place 
and aren’t visible to visitors to the site. 
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Note: The remote root directory must exist before Dreamweaver can connect to it. If 
you don't have a root directory for your site on the remote server, create one before 
attempting to connect, or ask the server's administrator to create a root directory for you 
if you can’t do it. 

If you’re uncertain what to enter in the Host Directory field, try leaving it blank. 
On some servers, your root directory is the same as the directory you first connect 
to with FTP. To find out, connect to the server. If a folder with a name like 
public_html, or www, or your login name, appears in the Remote panel, that’s 
probably the directory you should use in the Host Directory field. Write down the 
directory name, disconnect, and reopen the Site Definition dialog box. Then enter 
the directory name in the Host Directory field and connect again. 
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Troubleshooting remote site setup 

A Web server can be configured in a wide variety of ways. This section provides 

information on some common issues you may encounter in setting up a remote 

site, and how to resolve them. 

• Dreamweaver’s FTP implementation may not work properly with certain 
proxy servers, multilevel firewalls, and other forms of indirect server access. If 
you encounter problems with FTP access, ask your local system administrator 
for help. 

• Sometimes with slow connections the default FTP timeout value of 60 seconds 
results in too many timeouts. Increase this value (in the Site FTP panel of the 
Preferences dialog box) if you experience frequent timeouts. But don’t increase 
it too much, or you’ll have to wait a long time when a connection really can’t be 
made. Generally, timeout values of 30 to 120 seconds are the most useful. 

• File and folder names that contain spaces and special characters often cause 
problems when transferred to a remote site. Use underscores in place of spaces, 
and avoid special characters in file and folder names wherever possible. In 
particular, colons, slashes, periods, and apostrophes in file or folder names can 
cause problems. Special characters in file or folder names may also sometimes 
prevent Dreamweaver from creating a site map. 

• On the Macintosh, file names cannot be more than 31 characters long. If you 
encounter problems with long file names, rename them with shorter names. 

• Note that many servers use symbolic links (UNIX), shortcuts (Windows), or 
aliases (Macintosh) to connect a folder on one part of the server’s disk with 
another folder elsewhere. For example, the public_html subdirectory of your 
home directory on the server may really be a link to another part of the server 
entirely. In most cases, such aliases have no effect on your ability to connect to 
the appropriate folder or directory, but if you can connect to one part of the 
server but not another, there may be an alias problem. 

• In general, when you encounter a problem with an FTP transfer, examine the 
FTP log by choosing Window > Site FTP Log in the Site window (Windows) 
or Site > FTP Log (Macintosh). If you encounter an error message such as 
“cannot put file,” your remote site may be out of space. Look at the FTP log for 
more detailed information. 
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About the Site window 


Use the Site window for standard file maintenance operations, such as creating 
new HTML documents, moving files, creating folders, and deleting items; for site 
navigation layout with the site map (see “Viewing the site structure” on 
page 127); and for transferring files between your local and remote sites. By 
default, the remote site (or site map) appears in the left pane, and the local site 
appears in the right pane. You can change this setting in the Site FTP preferences. 
See “Setting Site FTP preferences” on page 146. 



Using Site window controls 

To open the Site window, choose Window > Site Files. Then use the following 
buttons and options to set what the Site window displays and to transfer files back 
and forth between the local site and the remote site: 

Site Files View displays the file structure of the remote or local site in the 
changeable pane of the Site window. (The changeable pane is whichever pane is 
not specified as always showing a particular site in the Site FTP section of the 
Preferences dialog box; see “Setting Site FTP preferences” on page 146.) This is 
the default view for the Site window. 

Site Map View displays a visual map of your site based on how the documents are 
linked to one another, in the changeable pane of the Site window. (The 
changeable pane is whichever pane is not specified as always showing a particular 
site in the Site FTP section of the Preferences dialog box; see “Setting Site FTP 
preferences” on page 146.) Hold down the button to choose Map Only or Map 
and Files from the pop-up menu. 
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Current sites pop-up menu lists sites you’ve defined. To switch sites, choose a 
different site from the list. To add a site or edit the information for an existing site, 
choose Define Sites from the bottom of the list (see “Associating a remote server 
with a local site” on page 140). 

Connect/Disconnect (available with FTP setting only) connects to or disconnects 
from the remote site. By default, Dreamweaver disconnects from the remote site if 
it has been idle for more than 30 minutes. Choose Edit > Preferences and select 
Site FTP to change the time limit. 

Refresh refreshes the local and remote directory lists. Use this button to manually 
refresh the directory lists if you deselected either Refresh Local File List 
Automatically or Refresh Remote File List Automatically (Local/Network setting 
only) in the Site Definition dialog box (see “Associating a remote server with a 
local site” on page 140). Also use this button to make the remote directory list 
appear when you have mounted a drive that contains the remote site after opening 
the Site window. 

Get copies the selected files from the remote site to your local site. If Enable File 
Check In and Check Out is on, the local copies are read-only; the files remain 
available on the remote site for other team members to check out. If Enable File 
Check In and Check Out is turned off, getting a file transfers a copy that has both 
read and write privileges. Note that the files copied are the ones selected in 
whichever pane of the Site window is currently active. If the Remote pane is 
active, the selected remote files are copied to the local site; if the Local pane is 
active, the remote versions of the selected local files are copied to the local site. See 
“Getting files from a remote server” on page 150. 

Put copies the selected files from the local site to the remote site. Note that the 
files copied are the ones selected in whichever pane of the Site window is currently 
active. If the Local pane is active, the selected local files are copied to the remote 
site; if the Remote pane is active, the local versions of the selected remote files are 
copied to the remote site. See “Putting files on a remote server” on page 151. 

Check Out transfers a copy of the file from the remote server to your local site 
(overwriting the existing local copy of the file, if any) and marks the file as 
checked out on the server. This option is not available if Enable File Check In and 
Check Out is turned off for the current site. See “Checking in and checking out 
files on a remote server” on page 148. 

Check In transfers a copy of the local file to the remote server and makes the file 
available for editing by others. The local file becomes read-only. This option is not 
available if Enable File Check In and Check Out is turned off for the current site. 
See “Checking in and checking out files on a remote server” on page 148. 

Stop Current Task aborts any current activity, including getting and putting files. 
The button appears as a red stop sign shape with a white X, in the lower right 
corner. Note that it may take a little time for the server to process the stop request, 
so the file transfer may not halt immediately. 
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Setting Site FTP preferences 

Choose Edit > Preferences and select Site FTP, and then choose from the 
following Site FTP preferences to control file transfer features available in 
the Site window: 

Always Show specifies which site (remote or local) is always shown, and which Site 
window pane (left or right) the local and remote files appear in. By default, the 
local site always appears on the right. Whichever pane is not chosen (the left one 
by default) is the changeable pane; that pane can display either the site map or the 
files in the other site (the remote site by default). 

Dependent Files displays a prompt for transferring dependent files (such as images, 
external style sheets, and other files referenced in the HTML file) that the browser 
loads when it loads the HTML file. By default, both Prompt on Get/Check Out 
and Prompt on Put/Check In are selected. 

Note: To force the Include Dependent Files prompt to appear even when these options are 
deselected, hold down Alt (Windows) or Option (Macintosh) while choosing the Get, Put, 
Check In, or Check Out commands. 

FTP Connection determines whether the connection to the remote site is 
terminated after the specified number of minutes have passed with no activity. 

FTP Time Out specifies the number of seconds for which Dreamweaver will 
attempt to make a connection with the remote server. If there is no response after 
the specified amount of time, Dreamweaver displays a warning dialog box alerting 
you to this fact. 

Firewall Host specifies the address of the proxy server to which you connect if you 
are behind a firewall. If you are not behind a firewall, leave this space blank. 

Note: If you are behind a firewall, select the Use Firewall option in the Site Definition dialog 
box. See "Associating a remote server with a local site” on page 140. 

Firewall Port specifies the port through which you connect to the FTP server. 

If you connect through a port other than 21 (the default for FTP), enter the 
number here. 

Put Options: Save Files Before Putting indicates that unsaved files are to be saved 
without prompting before being put onto the remote site. 

Define Sites brings up the Define Sites dialog box, where you can edit an existing 
site or create a new one. See “Associating a remote server with a local site” on 
page 140. 
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You can also define whether the types of files that you want to transfer should be 
transferred as ASCII (text) or binary. To do so, open the FTPExtensionMap.txt 
file in the Dreamweaver/Configuration folder. You can modify and delete the list 
of which file types are transferred in each format, as well as add your own file 
types. If a file’s extension is not defined in this file, Dreamweaver automatically 
transfers the file in binary mode. 

Note: On the Macintosh, the FTPExtensionMap.txt file also contains information about 
mapping file extensions to Macintosh creators and file types. This mapping allows a 
downloaded file to be given the correct icon and to be opened by the correct application 
when you double-click the file in the Finder. 

Note that when a file is transferred as ASCII, your Line Breaks preference setting 
is ignored. See “Setting HTML Format Preferences” on page 342. 


Using the check in/check out system 

When working in a collaborative environment, you can check out and check in 
files when transferring them between a remote server and your local computer. 
See “Checking in and checking out files on a remote server” on page 148. 

Checking out a file is the equivalent of declaring “I’m working on this file now— 
don’t touch it!” When a file is checked out, Dreamweaver displays a check mark 
next to the file’s icon in the Site window. A green check mark indicates that the file 
was checked out by you, and a red check mark indicates that the file was checked 
out by another team member. The name of the person who checked out the file is 
also displayed in the Site window. 

Checking in a file makes the file available to other team members to check out and 
edit. The local version becomes read-only to prevent you from making changes to 
the file while someone else has it checked out. 

Note: Although you don't need to know this to use the check in/check out system, in 
case you're curious, Dreamweaver keeps track of checked out files by placing a text file with 
the extension .Ick on both the remote server and the local site. The .Ick files are not visible in 
the Site window. Each .Ick file contains the name of the user who currently has the file 
checked out. 

Dreamweaver does not make checked-out files read-only on the remote server. 

If you transfer files with an application other than Dreamweaver, you can 
overwrite checked-out files. However, in applications other than Dreamweaver, 
the .Ick file is visible next to the checked-out file in the file hierarchy to help 
prevent such accidents. 

You can enable check in/check out for some sites and disable it for others. For 
information about transferring files between local and remote sites without 
checking them in or out, see “Getting files from a remote server” on page 150 and 
“Putting files on a remote server” on page 151. 
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Setting up the check in/check out system 

Before you can use the check in/check out system, you must set up some options. 

Note: To use the check in/check out system, you must have associated your local site with 
a remote FTP or network server. See "Associating a remote server with a local site” on 
page 140. 


To set check in/check out options: 

1 Choose Site > Define Sites, select a site, and click Edit. 

2 In the Category list at the left, click Check In/Out. 

• Select the Enable File Check In and Check Out option if you are working in a 
team environment (or working alone but from several different machines). 

This option is useful for letting others know that you have a file checked out 
for editing, or for alerting yourself that you may have left a more recent version 
of a file on another machine. See “Using the check in/check out system” on 
page 147. 

• Select the Check Out Files When Opening option if you want files to 
automatically be checked out when you double-click to open them from the 
Site window. (Using File > Open to open a file doesn’t check the file out even 
when this option is selected.) 

• Enter a check-out name. 

This is the name that will appear in the Site window alongside any files that 
you have checked out, enabling other team members to locate you if you have a 
file that they need. If you work alone from several different machines, use a 
different check-out name on each machine (for example, AmyR-HomeMac 
and AmyR-OfficePC) so you’ll know where the latest version of the file is if you 
forget to check it back in. 

Checking in and checking out files on a remote server 

Use the Site window or the Site menu in the Document window to check in and 
check out files on a remote server. 

If you’ve checked out a file but have decided not to edit it (or have decided to 
discard the changes you’ve made), you can undo a check out, to make the file on 
the server available to other team members to check out. 

Note: If you select Site > Check In or Site > Check Out while the Document window is 
active, and if the current file is not part of the currently open site, Dreamweaver attempts to 
determine which of your locally defined sites the current file belongs to; if the current file 
belongs to only one local site, Dreamweaver opens that site and then performs the Check In 
or Check Out operation. 
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To check out files from a remote server: 

1 Choose the desired site from the current sites pop-up menu at the top of the 
Site window. 

2 Check out files using one of the following approaches: 

• Select one or more files and click the Check Out button at the top of the 
Site window. 

• Choose Check Out from the context menu or the Site menu. 

3 To download dependent files along with the selected files, click Yes at the 
prompt. To refrain from downloading dependent files, click No. 


To check in files to a remote server: 

1 Choose the desired site from the current sites pop-up menu at the top of the 
Site window. 

2 Select one or more checked-out or new files in the Local pane and do one of 
the following: 

• Click the Check In button at the top of the Site window. 

• Choose Check In from the context menu or the Site menu. 

Files checked out by you are marked with a green check mark. If a file has a red 
check mark next to it, it’s currently checked out by another user; don’t check in 
such files. 

A lock symbol next to a file indicates that the file is read-only (Windows) or 
locked (Macintosh). 

New files have neither a check mark nor a lock symbol next to them. 

3 To upload dependent files along with the selected file, click Yes at the prompt. 
To refrain from uploading dependent files, click No. It’s usually a good idea to 
upload dependent files when checking in a new file, but if the latest versions of 
the dependent files are already on the remote server, there’s no need to upload 
them again. 


To undo a check out: 

Select the file and choose Site > Undo Check Out, or right-click (Windows) or 
Control-click (Macintosh) the file and choose Undo Check Out from the context 
menu. The local copy of the file becomes read-only, and any changes you’ve made 
to it are lost. 

Note: You can also check in and check out a file that is currently active in the Document 
window. In the Document window, choose Site > Check In or Site > Check Out. If you 
check out the currently active file, the currently open version of the file is overwritten by the 
new checked-out version. If you check in the currently active file, the file may be 
automatically saved before it's checked in, depending on the preference options you've set; 
see "Setting Site FTP preferences" on page 146. 
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Getting and putting files 

If you’re working in a collaborative environment, use the check in/check out 
system to transfer files between local and remote sites (see “Using the check in/ 
check out system” on page 147). If you’re the only person working on the remote 
site, however, you can instead use the Get and Put commands to transfer files 
without checking them in or out. 

Note: If you select Site > Get or Site > Put while the Document window is active, and if the 
current file is not part of the currently open site, Dreamweaver attempts to determine which 
of your locally defined sites the current file belongs to; if the current file belongs to only one 
local site, Dreamweaver opens that site and then performs the Get or Put operation. 


Getting files from a remote server 

Getting files copies them from the remote site to your local site. 

If you’re using the check in/check out system (that is, if Enable File Check In and 
Check Out is on), the Get command results in a read-only local copy of the file; 
the file remains available on the remote site for other team members to check out. 
If Enable File Check In and Check Out is turned off, then getting a file transfers a 
copy that has both read and write privileges. See “Using the check in/check out 
system” on page 147. 

Note: If you're working in a collaborative environment—that is, if others are working on the 
same files—then turning off Enable File Check In and Check Out is not recommended. In 
particular, if other people are using the Check In/Check Out system with the site, you should 
use that system as well. 

Note that the files that are copied when you click Get are the ones selected in 
whichever pane of the Site window is currently active. If the Remote pane is 
active, then the selected remote files are copied to the local site; if the Local pane 
is active, then the remote versions of the selected local files are copied to the 
local site. 

If you are not working in a collaborative environment and you want to have read/ 
write privileges for files that you get, turn off the Enable File Check In and Check 
Out option for the site; see “Associating a remote server with a local site” on 
page 140. 

To get only those files for which the remote version is more recent than the local 
version, use the Synchronize command; see “Synchronizing the files on your local 
and remote sites” on page 153. 
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To get files from a remote server: 

1 Choose Window > Site Files to open the Site window. 

2 At the top of the Site window, choose the desired site from the current sites 
pop-up menu. 

3 If you’re using FTP to transfer files, click Connect to open a connection to the 
remote server. 

If a connection is already open (indicated by the Connect button saying 
Disconnect instead of Connect), skip this step. If the remote files are visible in 
the Remote pane from a previous connection, clicking Connect isn’t required; 
when you click Get, Dreamweaver connects automatically. 

4 Select the desired files to download. (Usually you select these in the Remote 
pane, but you may instead select the corresponding files in the Local pane if 
you prefer.) 

5 Click Get, or choose Get from the context menu or the Site menu. If the file is 
currently open in a Document window, you can instead choose Site > Get from 
the Document window. 

6 To download dependent files, click Yes; to skip them, click No. (If you already 
have local copies of the dependent files, click No.) To avoid being asked about 
dependent files in future downloads, select the Don’t Ask Me Again option. 

Note: To stop the file transfer at any time, click the Stop Current Task button (the red stop 
sign with the white X in the lower right corner of the Site window) or press Esc (Windows) or 
Command-1-period (Macintosh). The transfer may not stop immediately. 

Dreamweaver records all FTP file transfer activity. If an error occurs when you are 
transferring a file using FTP, the Site FTP log can help you determine the 
problem. To display the log, choose Window > FTP Log from the Site window 
(Windows) or Site > FTP Log (Macintosh). 


Putting files on a remote server 

Putting files copies them from the local site to the remote site, generally without 
changing the file’s checked out status. There are two common situations in which 
you use Put instead of Check In: when you’re not in a collaborative environment 
and you aren’t using the Check In/Check Out system, or when you want to put 
the current version of the file on the server but you’re going to keep editing it. 

Note: If you put a file that didn't previously exist on the remote site, and if you're using the 
Check In/Check Out system, the file is copied to the remote site and is then checked out to 
you for continued editing. 

If you want to put a file on a remote server and check it in, use the Check In 
command. See “Checking in and checking out files on a remote server” on 
page 148. 
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To put only those files for which the local version is more recent than the remote 
version, see “Synchronizing the files on your local and remote sites” on page 153. 

Note: Do not use special characters (such as e, 5, or ¥) or punctuation such as colons, 
slashes, or periods in the names of files you intend to put on a remote server. Many servers 
change these characters during upload, which causes any links to the files to break. 


To put files on a remote server: 

1 Choose Window > Site Files to open the Site window. 

2 At the top of the Site window, choose the desired site from the current sites list 
pop-up menu. 

3 If you’re using FTP to transfer files, you may click Connect to open a 
connection to the remote server, which allows you to see what’s on the remote 
site before transferring any files. However, clicking Connect is not required; 
when you click Put, Dreamweaver connects automatically. 

4 Select the desired files to upload. (Usually you select these in the Local pane, 
but you may instead select the corresponding files in the Remote pane if 
you prefer.) 

5 Click Put, or choose Put from the context menu or the Site menu. 

6 If the file hasn’t been saved, a dialog box may appear (depending on your 
preference setting in the Site FTP panel of the Preferences dialog box) allowing 
you to save the file before putting it on the remote server. To save the file, click 
Yes; to put the previously saved version on the remote server, click No. 

If you choose not to save the file, any changes you’ve made since last time you 
saved will not be put onto the remote server. However, the file remains open, so 
you can still save the changes after putting the file on the server if you wish. 

7 To upload dependent files, click Yes; to skip them, click No. (If the remote site 
already contains copies of the dependent files, click No.) To avoid being asked 
about dependent files in future uploads, select the Don’t Ask Me Again option. 

£ Note: To stop the file transfer at any time, click the Stop Current Task button (the red stop 
sign with the white X in the lower right corner of the Site window) or press Esc (Windows) or 
Command + period (Macintosh). The transfer may not stop immediately. 

If the file is currently open in a Document window, you can instead choose Site > 
Put from the Document window. 

Dreamweaver records all FTP file transfer activity. If an error occurs when you are 
transferring a file using FTP, the Site FTP log can help you determine the 
problem. To display the log, choose Window > FTP Log from the Site window 
(Windows) or Site > FTP Log (Macintosh). 
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Synchronizing the files on your local and 
remote sites 

Once you’ve created files in your local and remote sites, you can synchronize the 
files between the two sites. Use the Site > Synchronize command to transfer the 
latest versions of your files to and from your remote site. 

If your remote site is an FTP server (rather than a networked server), then 
synchronizing your files uses FTP. For more information on using FTP, see 
“Associating a remote server with a local site” on page 140. 

Before you synchronize your sites, Dreamweaver lets you verify which files you 
want to put onto or get from your remote server. Dreamweaver also confirms 
which files have been updated after you complete the synchronization. 

To see which files are newer on the local site or which files are newer on the 
remote site, without synchronizing, choose Edit > Select Newer Local or Edit > 
Select Newer Remote (Windows, from the Site window) or Site > Site Files View 
> Select Newer Local or Site > Site Files View > Select Newer Remote 
(Macintosh). 

To synchronize your files: 

1 If you want to synchronize specific files or folders rather than the whole site, 
choose those files or folders in either the Local or the Remote pane of the 
Site window. 

2 Choose Site > Synchronize in the Site window (Windows) or from the menu 
bar (Macintosh). 

3 To synchronize the entire site, choose Entire ‘site name Site from the 
Synchronize pop-up menu. To synchronize selected files only, choose Selected 
Local Files Only (or Selected Remote Files Only if the Remote pane was where 
you made the most recent selection). 

4 Choose the direction in which you want to copy the files: 

• Choose Put Newer Files to Remote if you want to upload all the local files that 
have more recent modification dates than their remote counterparts. 

• Choose Get Newer Files from Remote if you want to download all the remote 
files that have more recent modification dates than their local counterparts. 

• Choose Get and Put Newer Files to place the most recent versions of all the files 
on both the local and the remote sites. 
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5 Choose whether or not to delete the files on the destination site that don’t have 
counterparts on the origin site. 

If you choose Put Newer Files to Remote and you select the Delete option, 
then Dreamweaver deletes any files in your remote site for which there are no 
corresponding local files. If you choose Get Newer Files from Remote, then 
Dreamweaver deletes any files in your local site for which there are no 
corresponding remote files. 

6 Click OK. 

If the newest version of each chosen file is already in both places, an alert 
appears, informing you that no synchronization is necessary. 

7 In the Synchronize Files dialog box, verify which files you want to delete, 
put, and get. If you don’t want Dreamweaver to delete, put, or get a particular 
file, deselect it by clicking the checkbox to the left of the file (in the 

Action column). 

8 Click OK. The files are automatically transferred (and deleted as necessary), 
and Dreamweaver updates the Synchronize Files dialog box with the status. 

9 To save the verification information to a local file, click Save Log. 

Searching and replacing 

You can search for a file in your local and remote sites from the Document 
window or the Site window. To display the Site window, choose Window > 

Site Files. 

You can also search the current document, selected files, a directory, or an entire 
site for text, text surrounded by specific tags, or F1TML tags and attributes. Note 
that you use different commands to search for files and to search for text (and/or 
HTML) within files: Locate in Local Site and Locate in Remote Site search for 
files, while Edit > Find and Edit > Replace search for text and tags within files. 

Note: If you select Site > Locate in Local Site or Site > Locate in Remote Site while the 
Document window is active, and if the current file is not part of the currently open site, 
Dreamweaver attempts to determine which of your locally defined sites the current file 
belongs to; if the current file belongs to only one local site, Dreamweaver opens that site 
and then locates the file in it. 


To find a file in your local site: 

1 Select the file in the Remote pane of the Site window or open the file in a 
Document window. 

2 Choose Site > Locate in Local Site. (On Windows only, if the Site window is 
active, choose Edit > Locate in Local Site.) 

The file is highlighted in the Local pane of the Site window. 
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To find a file in your remote site: 

1 Select the file in the Local pane of the Site window or open the file in a 
Document window. 

2 Choose Site > Locate in Remote Site. (On Windows only, if the Site window is 
active, choose Edit > Locate in Remote Site.) 

The file is highlighted in the Remote pane of the Site window. 

To search for text and/or HTML within documents: 

1 Choose from the following options: 

• From the Document or Site window, choose Edit > Find or Edit > Replace. 

• From the HTML Source inspector, right-click (Windows) or Control-click 
(Macintosh) and choose Find or Replace from the context menu. 

2 In the Find or Replace dialog box that appears, use the Find In option to 
specify which files to search: 

• Choosing Current Document confines the search to the active document. This 
option is available only when you choose Find or Replace with the Document 
window active, or from the context menu in the HTML Source inspector. 

• Choosing Selected Files confines the search to the files and folders that are 
currently selected in the Site window. This option is available only when you 
choose Find or Replace with the Site window active (that is, in front of the 
Document window). 

• Choosing Current Site expands the search to all the HTML documents, library 
files, and text documents in the current site. After you choose Current Site, the 
name of the current site appears to the right of the pop-up menu. If this is not 
the site you want to search, choose a different site from the current sites pop-up 
menu in the Site window. 

• Choosing Folder confines the search to a specific group of files. After choosing 
Folder, click the folder icon to browse to and select the directory you want 

to search. 
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3 Use the Find What option to specify the kind of search you want to perform. 

• Choosing Text lets you search for specific text strings in the Document 
window. A text search ignores any HTML that interrupts the string. For 
example, a search for the black dog would match both the black dog and the 
<i>black</i> dog. 

• Choosing HTML Source lets you search for specific text strings in the HTML 
source code. See “About HTML source searches” on page 157. 

• Choosing Text (Advanced) lets you search for specific text strings that are either 
within or not within a tag or tags. For example, in a document that contains 
the following HTML, searching for tries not inside i would find only the 
second instance of the word tries: John < i >tries</i > to get his work done on time, 
but he doesn't always succeed. He tries very hard. See “Searching for text between 
specific tags” on page 159. 

• Choosing Tag lets you search for specific tags, attributes, and attribute values, 
such as all TD tags with VALIGN set to TOP. See “Searching for HTML tags and 
attributes” on page 157. 

Note: Pressing Control + Enter or Shift+ Enter (Windows), or ControlT Return, 
Shift+Return, or Command + Return (Macintosh), adds line breaks within the search 
fields, allowing you to search for a Return character. Be sure to deselect the Ignore 
Whitespace Differences option when performing this search, if you're not using regular 
expressions. Note that this finds a particular character, not the general notion of a line 
break; for instance, it doesn't find a <br> tag or a <p> tag. Return characters appear as 
spaces in the Document window, not as line breaks. 

4 Use the following options to expand or limit the search: 

• The Match Case option, when selected, limits the search to text that matches 
the case of the text you want to find. For example, if you search for the brown 
derby, you will not find The Brown Derby. 

Note: The Ignore Whitespace Differences option, when selected, treats all whitespace as 
a single space for the purposes of matching. For example, with this option selected, this 
text would match this text but not thistext. This option is not available when the Use 
Regular Expressions option is selected; you must explicitly write your regular expression 
to ignore whitespace. Note that <p> and <br> tags do not count as whitespace. 

• The Use Regular Expressions option causes certain characters and short strings 
(such as ?, *, \w, and \b) in your search string to be interpreted as regular 
expression operators. For example, a search for the b\w*\b dog will match both 
the black dog and the barking dog. See “About regular expressions” on page 161. 
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About HTML source searches 


Use the HTML Source option in the Find or Replace dialog box to search for 
specific text strings in the HTML source code. For example, a search for black dog 
in the following code would produce two matches (in the ALT attribute and in the 
first sentence): 

<IMG SRC="barnaby.gif" WIDTH = "100" HEIGHT="100" 

ALT="Barnaby, a black dog."><BR> 

We saw several black dogs in the park yesterday. The black 
<A HREF="barnaby.html">dog</A> we liked best was called Barnaby. 

The phrase black dog also appears in the second sentence, but it does not match 
because it is interrupted by a link. 

See “Searching and replacing” on page 154 for step-by-step instructions on 
initiating a search. 


Searching for HTML tags and attributes 

Use the Tag option in the Find or Replace dialog box to search for specific tags, 
attributes, and attribute values. For example, you can search for all IMG tags with 
no ALT attribute. See “Searching and replacing” on page 154 for information 
about the various types of searches. 

To perform a tag search: 

1 Choose Edit > Find or Edit > Replace, and specify which files to search, as 
detailed in “Searching and replacing” on page 154. 

2 Choose Tag from the Find What pop-up menu. 

3 Choose a specific tag from the pop-up menu that is adjacent to the Find What 
pop-up menu, or choose [any tag]. 

If you just want to search for all occurrences of the specified tag, press the 
minus (-) button and skip to step 6. Otherwise, proceed with step 4. 
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4 Limit the search with one of the following tag modifiers: 

• Choose With Attribute to choose an attribute that must be in the tag for it to 
match. You can specify a particular value for the attribute or choose [any value]. 

• Choose Without Attribute to choose an attribute that cannot be in the tag for 
it to match. For example, choose this option to search for all IMG tags with no 
ALT attribute. 

• Choose Containing to specify text or a tag that must be contained within 
the original tag for it to match. For example, in the code <BxFONT 
FACE = "Arial">Heading 1 </FONTx/B>, the FONT tag is contained within 
the B tag. 

• Choose Not Containing to specify text or a tag that cannot be contained 
within the original tag for it to match. 

• Choose Inside Tag to specify a tag that the target tag must be inside of for it 
to match. 

• Choose Not Inside Tag to specify a tag that the target tag cannot be inside of 
for it to match. 

5 Click the plus (+) button and repeat step 4 to further limit the search. 

6 Initiate the search: 

• Click Find Next to highlight the next instance of the search text in the current 
document. 

• Click Find All to generate a list of all the instances of the search text in the 
current document. 

If you are searching in a directory or site, Find Next highlights the next 
instance of the search text in the current document or, if there is none, opens 
the next document that contains the search text. Find All generates a list of 
documents that contain the search text. 
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Searching for text between specific tags 

Use the Text (Advanced) option in the Find or Replace dialog box to search for 
specific text strings that are either within or not within a set of container tags. For 
example, you can search for the word Untitled between <title> tags to find all the 
untitled pages on your site. See “Searching and replacing” on page 154 for 
information about the various types of searches. 

To perform an advanced text search: 

1 Choose Edit > Find or Edit > Replace, and specify which files to search, as 
detailed in “Searching and replacing” on page 154. 

2 Choose Text (Advanced) from the Find What pop-up menu. 

3 Enter the text you want to search for in the text field adjacent to the Find What 
pop-up menu. 

For example, type the word Untitled. 

4 Choose Inside Tag or Not Inside Tag, and then choose a tag from the adjacent 
pop-up menu. 

For example, choose Inside Tag and then title. 

5 Click the plus (+) button to limit the search to tags with a specific attribute or 
attributes. 

Since the <title> tag has no attributes, you won’t need to use this option to find 
all the untitled pages on your site. 

6 Click Find Next to open the next document that contains the search text, or 
click Find All to generate a list of documents that contain this text. 
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Saving search patterns 

You can save search patterns for later use by clicking the Save Query button in the 
Find or Replace dialog box. Saving a query is a good idea if you regularly perform 
the same search (for example, to strip out nonstandard tags from documents 
created with another visual HTML editor, or to confirm that all images in a Hie 
have HEIGHT, WIDTH, and ALT attributes before the document goes live on the Web) 
and do not want to reconstruct the search pattern every time. 

To save a search pattern: 

1 Set the parameters for the search by following the steps outlined in “Searching 
and replacing” on page 154. 

If you are performing a tag or advanced text search, see “Searching for HTML 
tags and attributes” on page 157 or “Searching for text between specific tags” 
on page 159 for information about setting additional search parameters. 

2 Click the Save Query button (identified with a disk icon). 

The default location where queries are saved is the Configuration/Queries 
folder inside the Dreamweaver application folder. 

3 In the dialog box that appears, give the file a name that identifies the query and 
click Save. 

For example, if the search pattern involves looking for IMG tags with no ALT 
attribute, you might name the query img_no_alt.dwr. Find queries end in the 
extension .dwq; Replace queries end in the extension .dwr. 

To recall a search pattern: 

1 Choose Edit > Find or Edit > Replace. 

2 Click the Load Query button (identified with a folder icon). 

The Load Query dialog box automatically opens in the Configuration/Queries 
folder. You can navigate to another folder if you have saved queries elsewhere. 

3 Select a query file and click Open. 

If you are in the Find dialog box, only Find queries (.dwq files) are available. If 
you are in the Replace dialog box, both Find queries (.dwq files) and Replace 
queries (.dwr files) are available. 

4 Click Find Next, Find All, Replace, or Replace All to initiate the search. 
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About regular expressions 

Regular expressions are patterns that describe character combinations in text. Use 
them in your searches to help describe concepts such as “sentences that begin with 
‘The’” and “attribute values that contain a number.” The following table lists the 
special characters in regular expressions, their meanings, and usage examples. 

To search for text containing one of the special characters in the table, “escape” the 
special character by preceding it with a backslash. For example, to search for the 
actual asterisk in the phrase some conditions apply*, your search pattern might look 
like this: apply\*. If you don’t escape the asterisk, you’ll find all the occurrences of 
“apply” (as well as any of “appl”, “applyy”, and “applyyy”), not just the ones 
followed by an asterisk. 


Character Matches 


Example 


$ 


Beginning of input or line. 


End of input or line. 


matches "T" in "This 
good earth" but not in 
"Uncle Tom's Cabin" 

h$ matches "h" in "teach" 
but not in "teacher" 


* 


+ 


? 


x | y 


The preceding character 0 or 
more times. 


The preceding character 1 or 
more times. 


The preceding character at most 
once (that is, indicates that the 
preceding character is optional). 


Any single character except 
newline. 


Either x or y. 


urn* matches "urn" in "rum", 
"umm" in "yummy", and "u" 
in "huge" 

um+ matches "urn" in "rum" and 
"umm" in "yummy" but nothing 
in "huge" 

st?on matches "son" in 
"Johnson" and "ston" in 
"Johnston" but nothing in 
"Appleton" or "tension" 

.an matches "ran" and "can" 
in the phrase "bran muffins 
can be tasty" 

FF000010000FF matches "FFOOOO" 
in BGCOLOR="#FFOOOO" and 
"OOOOFF'" in FONT 
COLOR="#OOOOFF" 


{n} 


{n,m} 


Exactly n occurrences of the 
preceding character. 


At least n and at most 
m occurrences of the 
preceding character. 


o{2} matches "oo" in "loom" and 
the first two o's in "mooooo" but 
nothing in "money" 

F{2,4} matches "FF" in "#FF0000" 
and the first four Fs in #FFFFFF 
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Character 


Matches 


Example 


[abc] 


[ ~ abc] 


\b 

\B 

\d 


Any one of the characters 
enclosed in the brackets. Specify 
a range of characters with a 
hyphen (for example, [a-f] is 
equivalent to [abcdef]). 

Any character not enclosed in 
the brackets. Specify a range of 
characters with a hyphen (for 
example, [ ^a-f] is equivalent 
to [ ~ abcdef]). 

A word boundary (such as a 
space or carriage return). 

A nonword boundary. 


Any digit character. 
Equivalent to [0-9], 


[e-g] matches "e" in "bed", "f" in 
"folly", and "g" in "guard" 


[~aeiou] initially matches "r" in 
"orange", "b" in "book", and "k" 
in "eek!" 


\bb matches "b" in "book" but 
nothing in "goober" or "snob" 

\Bb matches "b" in "goober" but 
nothing in "book" 

\d matches "3" in "C3PO" and "2" 
in "apartment 2G" 


\D Any nondigit character. Equivalent \D matches "S" in "900S" and "Q" 

to 0-9]. in "Q45" 

\f Form feed. 

\n Linefeed. 


\r 

\s 


\S 


Carriage return. 

Any single white-space 
character, including space, 
tab, form feed, or line feed. 

Any single non-white-space 
character. 


\sbook matches "book" in "blue 
book" but nothing in "notebook" 


\Sbook matches "book" in 
"notebook" but nothing in 
"blue book" 


\t A tab. 


\w 


Any alphanumeric character, 
including underscore. Equivalent 
to [A-Za-zO-9J. 


b\w* matches "barking" in "the 
barking dog" and both "big" and 
"black" in "the big black dog" 


162 Chapter 5 





Character 

Matches 

Example 


\W 

Any non-alphanumeric character. 
Equivalent to [ ~ A-Za-zO-9J. 

\W matches ' 
Mattie" and 

in "Jake & 

"%" in "100%" 

Control + Enter 
or Shift+Enter 
(Windows), or 
Control + 
Return or 
Shift+Return 
orCommand + 
Return 
(Macintosh) 

Return character. Be sure to 
deselect the Ignore Whitespace 
Differences option when 
searching for this, if not using 
regular expressions. Note that this 
matches a particular character, 
not the general notion of a line 
break; for instance, it doesn't 
match a <br> tag or a <p> tag. 
Return characters appear as 
spaces in the Document window, 
not as line breaks. 




Use parentheses to set off groupings within the regular expression to be referred to 
later; use $1, $2, $3, and so on (in either the Find field or the Replace field) to 
refer to the first, second, third, and later parenthetical groupings. For example, 
searching for (\d+)\/(\d+)\/(\d+) and replacing it with $21 $l/$3 swaps the day and 
month in a date separated by slashes (to convert between American-style dates and 
European-style dates). 
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Creating sites for multiple browsers 

As you create your site, you should be aware of the variety of Web browsers your 
visitors are likely to use. Where possible, design sites for maximum compatibility, 
given other design constraints. 


Why and when to create cross-browser-compatible sites 

There are over two dozen different Web browsers in use, most of which have been 
released in more than one version. Even if you target only Netscape Navigator and 
Microsoft Internet Explorer, which are used by the majority of Web users, be 
aware that not everyone uses the very latest versions of those browsers. If your site 
is on the Web, sooner or later someone will visit it using Netscape Navigator 
2.0—or the browser that AOL provides its customers, or a text-only browser 
such as Lynx. 

There are some circumstances under which there’s no need to create cross¬ 
browser-compatible sites. For example, if your site is available only on your 
company’s intranet, and you know that all of your company’s employees use the 
same browser, you can optimize your site to rely on features of that browser. 
Similarly, if you’re creating HTML content to be distributed on CD-ROM, and 
you distribute a browser on the CD, you can assume that all of your customers 
have access to that particular browser. 

But under most circumstances, for Web sites designed for public consumption, it’s 
a good idea to make your site viewable using as many browsers as possible. Pick 
one or two browsers as your target browsers, and design the site for those 
browsers, but try exploring the site in other browsers now and then to avoid 
providing too much incompatible content. 


General issues to consider 

The more sophisticated your site is—in terms of layout, animation, multimedia 
content, and interaction—the less likely it is to be cross-browser compatible. Not 
all browsers can run JavaScript, for example. A page of plain text that uses no 
special characters will probably display well in any browser, but such a page may 
have much less aesthetic appeal than one that uses graphics, layout, and 
interaction effectively. Try to strike a balance between designing for maximum 
effect and designing for maximum compatibility. 

One useful approach is to provide multiple versions of certain important pages, 
such as your site’s home page. For example, you can design both a framed version 
and a frameless version of such a page. You can then use various browser 
capabilities to automatically shift visitors without frame-capable browsers to the 
frameless version. 
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Using Behaviors to detect browsers 
and plugins 

You can use behaviors to determine which browser your visitors are using and to 
determine whether they have a particular plugin installed. For more information 
on behaviors, see “Using Behaviors” on page 297. 

Check Browser sends visitors to different pages depending on their browser brands 
and versions. For example, you might want visitors to go to one page if they have 
Netscape Navigator 4.0 or later, to go to another page if they have Microsoft 
Internet Explorer 4.0 or later, and to stay on the current page if they have any 
other kind of browser. See “Check Browser” on page 308. 

Check Plugin sends visitors to different pages depending on whether they have the 
specified plugin installed. For example, you might want visitors to go to one page 
if they have Shockwave and another page if they do not. See “Check Plugin” on 
page 309. 
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About testing your site 

Before uploading your site to a server and declaring it ready for viewing, it’s a good 
idea to test it locally. You want to make sure that your pages look and work as 
expected in the browsers you’re targeting, that there are no broken links, and that 
the pages don’t take too long to download. 

The following guidelines will help you create a good experience for visitors to 
your site: 

• Make sure your pages function as expected in the browsers you’re targeting and 
that they “fail gracefully” in other browsers. Your pages should be legible and 
functional in browsers that do not support styles, layers, or JavaScript. See 
“Checking a page for compatibility with target browsers” on page 167. For 
pages that will fail badly in older browsers, consider using the Check Browser 
behavior to automatically redirect visitors to another page. See “Check 
Browser” on page 308. 

• Check your site for broken links (and fix them). Also, Dreamweaver generates a 
list of links to external sites when you run a link check; periodically follow these 
links to make sure they’re still valid. Other sites undergo redesign and 
reorganization too, and the page you’re linking to may have been moved or 
deleted. See “Checking links between documents” on page 168 and “Fixing 
broken links” on page 169. 

• Preview your pages in as many different browsers and on as many different 
platforms as possible. This gives you an opportunity to see differences in layout, 
color, font sizes, and default browser window size that cannot be predicted in a 
target browser check. See “Previewing in browsers” on page 170. 

• Keep an eye on the size of your pages and the time they take to download. Keep 
in mind that for pages that consist of one large table, visitors will see nothing 
until the entire table has finished loading. Consider breaking up large tables; if 
this is not possible, consider putting a small amount of content—such as a 
welcome message or an advertising banner—outside the table at the top of the 
page so users can view this material while the table downloads. See “Checking 
download time and size” on page 171. 
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Checking a page for compatibility with target browsers 

Dreamweaver lets you construct Web pages with elements that are supported by 
all browsers (for example, images and paragraph text), as well as elements that are 
supported only by newer browsers (for example, styles and layers). 

The Check Target Browsers feature tests the HTML in your documents to see if 
any tags or attributes are unsupported by your target browsers. The check does not 
alter the document in any way. 

The Check Target Browsers feature uses text files called browser profiles to 
determine which tags particular browsers support. Dreamweaver includes 
predefined profiles for Netscape Navigator versions 2.0, 3.0, and 4.0, and for 
Internet Explorer versions 2.0, 3.0, 4.0, and 5.0. To modify the existing profiles or 
to create new ones, see “About browser profiles” on page 394. 

You can run a target browser check on a document, on a directory, or on an 
entire site. Note that doing so does not check scripts in your site. 

To run a target browser check: 

1 Choose from the following options: 

• To run the check on the current document, save your file. The check is 
performed on the last saved version of the file and does not include 
unsaved changes. 

• To run the check on a directory or site, choose Window > Site Files to open the 
Site FTP window; then select a folder from the local directory. The target 
browser check is performed on all the HTML files in this folder and any folders 
inside it. Target browser checks can be performed only on local files. 

2 Choose File > Check Target Browsers. 

If you have not yet selected a primary browser, you are prompted to do so. 

3 From the list of browsers, select the browser or browsers to check against. 

4 Click Do Check. 

The browser target report opens in your primary browser (the browser launches 
if it is not already open). 

5 To save the report for later reference, choose File > Save from the browser. 

The target browser check report is a temporary file stored in the Temp folder in 
Windows and in the document root on the Macintosh. The file will be lost if 
you don’t save it before browsing to another site. 


Site Management 167 



Checking links between documents 

Use the Check Links feature to search for broken links and unreferenced files in an 
open file, a portion of a local site, or an entire local site. The only links that 
Dreamweaver verifies are links to documents within the site; Dreamweaver 
compiles a list of external links that appear in the selected document or 
documents, but it does not verify them. 

When Dreamweaver has finished checking the links in the specified files, it opens 
the Link Checker dialog box. This dialog box displays a list of broken links, 
external links (links that Dreamweaver can’t check because they are outside the 
site), and orphaned files (files that no other documents link to). See “Fixing 
broken links” on page 169 for more information. 

To check links within the current document: 

1 Save the file to a location within a local site. 

2 Choose File > Check Links. 

To check links within a portion of a local site: 

1 Choose Window > Site Files to open the Site window. 

2 Choose a site from the sites list pop-up menu. 

3 In the Local pane, select the files or folders to check. 

4 Initiate the check using either of these methods: 

• Right-click (Windows) or Control-click (Macintosh) one of the selected files 
and choose Check Links > Selected Files/Folders from the context menu. 

• Choose File > Check Links. 

To check links in the entire site: 

Choose Site > Check Links Sitewide. 

To toggle among the link-checker report lists: 

After running a link check, choose Broken Links, External Links, or Orphaned 
Files from the Show pop-up menu. 

To save the complete report as a tab-delimited text file: 

Click Save. 
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Fixing broken links 

When you check links in Dreamweaver, the Link Checker dialog box appears with 
a report of broken links, external links, and—if you chose to check the entire 
site—orphaned files. 

You can fix broken links and image references directly in the Link Checker dialog 
box, or you can open files from the list and fix links in the Property inspector. 


To fix links in the Link Checker dialog box: 

1 In the Link Checker dialog box, select the broken link. 

2 Click the folder icon to browse to the correct file to link to, or type the correct 
path and file name. 

3 Press Tab or Enter. 

If there are other broken references to this same file, a dialog box appears 
prompting you to fix the references in the other files as well. Click Yes to have 
Dreamweaver update all the documents on the list that reference this file. Click 
No to have Dreamweaver update the current reference only. 

Note: If Enable File Check In and Check Out is on for the site, Dreamweaver attempts to 
check out files that require changes. If it cannot check out a file, Dreamweaver displays a 
warning dialog box and leaves broken references unchanged. See "Using the check in/check 
out system" on page 147. 


To fix links in the Property inspector: 

1 In the Link Checker dialog box, double-click an entry in the File column. 

Dreamweaver opens the document, selects the offending image or link, and 
highlights the path and file name in the Property inspector. (If the Property 
inspector is not visible, choose Window > Properties to open it.) 

2 To set a new path and file name, click the folder icon to browse to the correct 
file, or type over the highlighted text. 

If you are updating an image reference and the new image appears at the 
incorrect size, click the W and H labels in the Property inspector or click the 
Refresh button to reset the height and width values. The W and H labels 
change from bold to normal type. 

3 Save the file. 

As links are fixed, their entries disappear from the Broken Links list. If an entry 
still appears in the list after you have entered a new path or file name in the Link 
Checker (or after you have saved any changes you made in the Property 
inspector), it means that Dreamweaver cannot find the new file. The link is still 
considered broken. 
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Previewing in browsers 

You can preview documents in your target browsers at any time. You don’t have to 
save the document first. All browser-related functions work, including JavaScript 
behaviors, document-relative and absolute links, ActiveX controls, Netscape 
plugins, and so on, provided that you have installed the required plugins or 
ActiveX controls. 

Content linked with a root-relative path does not appear when you preview 
documents in a local browser. This is because browsers don’t recognize site roots— 
servers do. To preview content linked with root-relative paths, put the file on a 
remote server and view it from there. See also “About absolute paths” on page 110. 

You can define up to 20 browsers for previewing. All the browsers you define 
appear on the Preview in Browser menu. 

To preview your document in a browser: 

Do one of the following: 

• Choose File > Preview in Browser. 

• Press F12 to display the current document in the primary browser. 

• Press Control+F12 (Windows) or Command+F12 (Macintosh) to display the 
current document in the secondary browser. 

To change your primary browser or define a secondary browser: 

1 Choose File > Preview in Browser > Edit Browser List. 

2 Set previewing preferences as desired. 
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Setting Preview in Browser preferences 

Preview in Browser preferences display the currently defined primary and 
secondary browsers. To open Preview in Browser preferences, choose Edit > 
Preferences and select Preview in Browser, or choose File > Preview in Browser > 
Edit Browser List. 

Preview Using Local Server (Windows only) allows you to choose whether to use a 
local server when you preview a page in a browser. (You must be running server 
software on your local computer for this option to work.) When this option is 
selected, Dreamweaver supplies the current page for previewing by a local server as 
a URL beginning with http://localhost/. With this option deselected, 
Dreamweaver opens the document in a browser with a file path beginning with 
file://. In some cases, links specified as site-root-relative paths do not work 
correctly when opened in a browser with a file:// path. 

+ adds a browser to the list. 

- deletes the selected browser from the list. 

Edit changes settings for the selected browser. 

Primary Browser and Secondary Browser specify whether the selected browser is 
the primary or secondary browser. F12 opens the primary browser. Control+F12 
(Windows) or Command+F12 (Macintosh) opens the secondary browser. 


Checking download time and size 

The size and estimated download time of the current page appear at the bottom of 
the Document window. Dreamweaver calculates size based on the entire contents 
of the page, including all linked objects such as images and plugins. 

Dreamweaver estimates download time based on the connection speed entered in 
the Status Bar panel of the Preferences dialog box. Actual download time varies 
depending on general Internet conditions. 

To set download time and size preferences: 

1 Choose Edit > Preferences and then click Status Bar. 

2 Choose a connection speed with which to calculate download time. 

The average connection speed in the United States is 28.8. If you are designing 
for an intranet, you may want to choose 1500 (Tl speed). 
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About Design Notes 

You can keep track of extra file information associated with your documents, such 
as image source-file names and comments on file status, by using the Design 
Notes command. 

For example, if you copy a document from one site to another, you can add 
Design Notes for that document, with the comment that the original document is 
in the other site folder. Then if you update that document (or someone else does), 
you’ll know that you need to update the original page as well. 

You can also use Design Notes to keep track of sensitive information that you 
can’t put inside a document for security reasons. For example, you can include 
information about how the document was created, or notes on how a particular 
price or configuration was chosen, or what marketing factors influenced a 
design decision. 


Saving file information in Design Notes 

You can create a Design Notes file for each document or template in your site. 
(Note that if you add Design Notes to a template, the documents based on the 
template do not inherit the Design Notes.) You can also create Design Notes for 
applets, ActiveX controls, images, Flash movies, Shockwave objects, and image 
fields in your documents. 

To set up Design Notes for your site: 

1 Choose Site > Define Sites, select a site, and click Edit. 

2 In the Category list at the left, click Design Notes. 

• Enable Design Notes for your site by selecting Maintain Design Notes (if it’s 
not already selected). 

When Maintain Design Notes is selected, you can create Design Notes for files 
in your site. Whenever a file is copied, moved, renamed, or deleted, the 
associated Design Notes file is also copied, moved, renamed, or deleted. 

• Choose whether the Design Notes associated with your site are uploaded with 
the rest of your documents, by selecting or deselecting Upload Design Notes 
for Sharing. 

When Upload Design Notes for Sharing is selected, you can share Design 
Notes with the rest of your team. When you put or get a file, Dreamweaver 
automatically puts or gets the associated Design Notes file. If you work alone 
on your site, you can deselect this option to improve performance of file 
transfers; when the option is deselected, Design Notes are maintained locally 
but are not uploaded with your files. 

3 Click OK. 
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To add Design Notes to a document: 

1 While the document is active in the Document window, choose File > 

Design Notes. 

You can also select the file in the Site window, and then choose File > Design 
Notes. If the file resides on a remote site, you must first check out or get the 
file, then select it in the local folder. (See “Checking in and checking out files 
on a remote server” on page 148 or “Getting and putting files” on page 150.) 

2 In the Basic Info tab, add notes of various sorts: 

• Choose the status of the document from the Status pop-up menu. 

• Type comments in the Notes text field. 

• Click the date icon (just above the Notes text field) to insert the current 
local date. 

• To make the Design Notes file appear every time the file is opened, select Show 
When File Is Opened. 

3 In the All Info tab, add other keys and values that might be useful to other 
developers of your site. For example, you could name a key Author (in the 
Name field) and define the value as Heidi (in the Value field). Click the plus (+) 
button to add a new key/value pair; select a pair and click the minus (-) button 
to remove it. 

4 Click OK to save the notes. 

The notes you entered are saved to a subfolder called _notes, in the same 
location as the current file. The file name is the document’s file name, plus the 
extension ,mno. For example, if the file name is index.html, the associated 
Design Notes file is named index.html.mno. 

To add Design Notes to an object: 

1 Choose Design Notes from the object’s context menu. (Open the context menu 
for the object by right-clicking (Windows) or Control-clicking (Macintosh) 
the object.) 

2 Follow steps 2 through 4 above for adding Design Notes to a document. 

Note that an object’s Design Notes file is saved in a _notes subfolder in the 
same directory as the object’s source file, which is not necessarily in the same 
directory as the document that the object appears in. 
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To assign a status that isn't listed in the Status pop-up menu: 

1 Open Design Notes for a file or object. 

2 Click the All Info tab. 

3 Click the plus (+) button. 

4 In the Name field, enter the word status. 

5 In the Value field, enter the status. 

If a status value already existed, it’s replaced with the new one. 

6 Click the Basic Info tab and note that the new status value appears in the Status 
pop-up menu. 

Note: You can have only one new value in the status menu at a time. If you follow this 
procedure again, the new status value you entered the first time is replaced with the new 
status value you enter the second time. 

To disable Design Notes: 

1 Choose Site > Define Sites. 

2 In the Define Sites dialog box, select the site and click Edit. 

3 In the Site Definition dialog box, click Design Notes. 

4 Deselect Maintain Design Notes. 

Deselecting this option disables the Design Notes capability. If you deselect 
this option and then click Clean Up, all local Design Notes files for your site 
are deleted. 

5 Click OK. 

A dialog box appears, asking if you would like to delete existing Design Notes 
files. Click Yes to delete such files, or No to leave them in place. 

To use Design Notes locally only: 

1 Choose Site > Define Sites. 

2 In the Define Sites dialog box, select the site and click Edit. 

3 In the Site Definition dialog box, click Design Notes. 

4 Deselect Upload for Sharing. 

Design Notes will not be transferred to the remote site when you check in/put 
your files. You will still be able to add and modify the Design Notes for your 
site locally. 
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To delete unassociated Design Notes from your site: 

1 Choose Site > Define Sites. 

2 In the Define Sites dialog box, select the site and click Edit. 

3 In the Site Definition dialog box, click Design Notes. 

4 Click Clean Up. Dreamweaver prompts you to verify that it should delete any 
Design Notes that are no longer associated with a file in your site. (If you use 
Dreamweaver to delete a file that has an associated Design Notes file, the 
Design Notes file is deleted too, so usually orphan Design Notes files occur 
only if you delete or rename a file outside of Dreamweaver.) 

Note If you deselect the Maintain Design Notes option before you click Clean Up, 
Dreamweaver deletes all Design Notes files for your site. 


Using Design Notes in Fireworks and Dreamweaver 

If you open a graphic in Macromedia Fireworks 3.0 and export it to another 
format, Fireworks automatically saves the name of the original source file in a 
Design Notes file. For example, if you open myhouse.png in Fireworks and 
export it to myhouse.gif, Fireworks automatically creates a Design Notes file 
called myhouse.gif.mno, which contains the name of the original file, as an 
absolute file: URL. For example, the Design Notes for myhouse.gif might contain 
this line: 

fw_source="file:///Mydisk/sites/assets/orig/myhouse.png" 

If the image contains hotspots or rollovers, the HTML source for those items is 
also added to the Design Notes file. 

When you import the graphic into Dreamweaver, the Design Notes file is 
automatically copied into your site along with the graphic. When you select the 
image in Dreamweaver and choose to edit it using Fireworks (see “Using an 
external image editor” on page 205), Fireworks opens the original file for editing. 
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CHAPTER 6 

Formatting Text 


Formatting in Dreamweaver is similar to using a standard word processor. Use the 
Text > Format submenu or the Format pop-up menu in the Property inspector to 
set the default formatting style (Paragraph, Preformatted, Heading 1, Heading 2, 
and so on) for a block of text. To change the font, size, color, and alignment of 
selected text, use the Text menu or the Property inspector. To apply formatting 
such as bold, italic, code, underline, and so on, use the Text > Styles submenu. 

You can also combine several standard HTML tags to form a single style, called an 
HTML style. For example, you can manually apply HTML formatting using a 
combination of tags, and then save that formatting as an HTML style; it’s stored 
in the HTML Style palette. The next time you want to format text using that 
combination of HTML tags, you can simply select the saved style from the 
HTML Style palette. HTML styles are supported by all Web browsers and save 
time over manually formatting text. 

Another kind of style, called a CSS style, lets you apply text and page formatting 
with the advantage of automatic updating. You can store CSS styles directly in 
the document or, for more power and flexibility, in external style sheet. If you 
attach an external style sheet to several web pages, all the pages automatically 
reflect any changes you make to the style sheet. To access CSS styles, use the 
CSS Style palette. 

Manual HTML formatting and HTML styles apply formatting using standard 
HTML tags (such as B, FONT, and CODE) that are supported by all popular Web 
browsers. CSS styles define the formatting for all text in a particular class or 
redefine the formatting for a particular tag (such as HI, H2, P, or Ll). CSS (which 
stands for Cascading Style Sheets) is supported only by the newer Web browsers— 
Netscape Navigator 4.0 and later and Microsoft Internet Explorer 3.0 and later. 

You can use CSS styles, HTML styles, and manual HTML formatting within the 
same page. Manual HTML formatting overrides formatting applied by an HTML 
style or CSS style, so although it is labor intensive, it can be a convenient method 
of modifying formatting applied by HTML styles or CSS styles. 
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Formatting text using HTML tags 

You can apply HTML text formatting to one letter or build a whole site using 
Text > Format commands or options in the Property inspector. This kind of 
manual formatting replaces or overrides formatting set by an HTML style or 
CSS style. 

When you apply HTML text formatting, you use the Property inspector and 
commands in the Text menu, such as Text > Format and Text > Style. 


Applying paragraph and heading tags 

Use the Format pop-up menu in the Property inspector or the Text > Format 
submenu to apply the standard paragraph and heading tags. (To redefine the 
appearance of paragraph and heading tags, use CSS style sheets; see “Formatting 
text with CSS style sheets” on page 188.) 

To apply a paragraph or heading tag: 

1 Place the insertion point in the paragraph, or select some of the text in 
the paragraph. 

2 Using the Text > Format submenu or the Format pop-up menu in the Property 
inspector, choose an option: 

• Choose a paragraph format (for example, Heading 1, Heading 2, Preformatted 
Text, and so on). The HTML tag associated with the selected style (for 
example, HI for Heading 1, H2 for Heading 2, PRE for Preformatted text, and so 
on) is applied to the entire paragraph. 

• Choose None to remove a paragraph format. 
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Changing font characteristics 

Use the Property inspector or the Text menu to change font characteristics for 

selected text. 

To change font characteristics: 

1 Select the text. If no text is selected, the change applies to subsequent text 
you type. 

2 Choose from the following options: 

• To change the font, choose a font combination from the Property inspector or 
from the Text > Font submenu. 

Browsers display the text using the first font in the combination that is installed 
on the user’s system. If none of the fonts in the combination is installed, the 
browser displays the text as specified by the browser preferences. (See also 
“Modifying font combinations” on page 180.) Choose Default to remove 
previously applied font faces; Default applies the default font for the selected 
text (either the browser default font or the font assigned to that tag in the 
CSS style sheet). 

• To change the font style, click Bold or Italic in the Property inspector, 
or choose a font style (Bold, Italic, Underline, and so on) from the 
Text > Style submenu. 

• To change the font size, choose a size (1 through 7) from the Property inspector 
or from the Text > Size submenu. 

HTML font sizes are relative, not specific point sizes. Users set the point size of 
the default font for their browsers; this is the font size that they will see when 
you choose Default or 3 in the Property inspector or Text > Size submenu. Sizes 
1 and 2 will appear smaller than the default font size; sizes 4 through 7 will 
appear larger. To make your text appear in a specific point size every time, use 
CSS style sheets. 

• To increase or decrease the size of selected text, choose a relative size (+ or -1 to 
+ or —7) from the Property inspector or from either the Text > Size Increase or 
Text > Size Decrease menu. 

The numbers indicate a relative difference from the BASEFONT size. The default 
BASEFONT value is 3. Thus, a +4 value results in a font size of 7. Dreamweaver 
does not display the BASEFONT tag (which goes in the EIEAD section), although 
the font size should display properly in a browser. 


Formatting Text 179 



Modifying font combinations 

Use the Edit Font List command to set the font combinations that appear in the 
Property inspector and the Text > Font submenu. 

Font combinations determine how a browser displays your Web page’s text. A 
browser uses the first font in the combination that is installed on the user’s system; 
if none of the fonts in the combination is installed, the browser displays the text as 
specified by the browser preferences. 

To modify font combinations: 

1 Choose Text > Font > Edit Font List. 

2 Select the font combination from the list at the top of the dialog box. 

The fonts in the selected combination are listed in the Chosen Fonts list in the 
lower left corner of the dialog box. To its right is a list of all fonts installed on 
your system. 

3 Choose from the following options: 

• To add or remove fonts from a font combination, click the << or » button 
between the Chosen Fonts list and the Available Fonts list. 

• To add or remove a font combination, click the plus (+) and minus (-) buttons 
at the top of the dialog box. 

• To add a font that is not installed on your system, type the font name in 
the text field below the Available Fonts list and click the « button to add it 
to the combination. Adding a font not installed on your system is useful, for 
example, for specifying a Windows-only font when you are authoring on 

a Macintosh. 

• To move the font combination up or down in the list, click the arrow buttons 
at the top of the dialog box. 
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To add a new combination to the font list: 

1 Choose Text > Font > Edit Font List. 

2 Select a font from the Available Fonts list and click the << button to move the 
font to the Chosen Fonts list. 

3 Repeat step 2 for each subsequent font in the combination. 

To add a font that is not installed on your system, type the font name in 
the text field below the Available Fonts list and click the « button to add the 
font to the combination. Adding a font not installed on your system is useful, 
for example, for specifying a Windows-only font when you are authoring on 
a Macintosh. 

4 When you have finished selecting specific fonts, select a generic font family 
from the Available Fonts menu and click the « button to move the generic 
font family to the Chosen Fonts list. 

Generic font families include cursive, fantasy, monospace, sans-serif, and serif. 
If none of the fonts in the Chosen Fonts list is available on the user’s system, 
the text appears in the default font associated with the generic font family. For 
example, the default monospace font on most systems is Courier. 


Changing the color of text 

You can change the color of selected text so that the new color overrides the text 

color set in Page Properties. (If no text color has been set in Page Properties, the 

default text color is black.) 

To change the color of text: 

1 Select the text. 

2 Choose from the following options: 

• Choose a color from the palette of browser-safe colors by clicking the color box 
in the Property inspector. 

• Choose Text > Color. The system Color Picker dialog box appears. Select a 
color and click OK. 

• To define the default text color, use the Modify > Page Properties command. 
See “Defining default text colors” on page 96. 

To return text to the default color: 

1 In the Property inspector, click the color box to open the palette of 
browser-safe colors. 

2 Click the Erase button (the middle button in the lower right corner). 
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Aligning text and elements 

Align text on the page using the Property inspector or the Text > Alignment 
submenu. Center any element on a page using the Text > Alignment > Center 
command. 

To align text: 

1 Select the text you want to align. 

2 Click an alignment option (Left, Right, or Center) in the Property inspector, or 
choose Text > Alignment and choose an alignment command. 

To center elements: 

1 Select the element (image, plug-in, table, or other page element) you want 
to center. 

2 Choose Text > Alignment > Center. 

Note: You can align and center complete blocks of text; you cannot align or center part of a 
heading or part of a paragraph. 

To indent text and remove indentation: 

1 Select the desired text. 

2 Click the Indent or Outdent button in the Property inspector, choose 
Text > Indent or Outdent, or choose List > Indent or Outdent from the 
context menu. 

This applies or removes the BLOCKQUOTE tag when the selected text is a 
paragraph or heading; it adds or removes an extra UL or OL tag when the 
selected text is a list. 
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Creating lists 

You can create numbered lists, bulleted lists, and definition lists from existing text 

or from new text as you type in the Document window. Lists can also be nested. 

To create a new list: 

1 Place the insertion point on the line where you want to add a list of new items. 

2 Click the Bulleted or Numbered List buttons in the Property inspector, or 
choose Text > List and select the type of list desired—Unordered (bulleted) 
List, Ordered (numbered) List, or Definition List. 

3 Begin typing the list, pressing Enter (Windows) or Return (Macintosh) to 
begin another list item. 

4 To complete the list, press Enter twice (Windows) or press Return 
twice (Macintosh). 

To create a list using existing text: 

1 Select a series of paragraphs to make into a list. 

2 Click the Bulleted or Numbered List button in the Property inspector, or 
choose Text > List and select the type of list desired—Unordered (bulleted) 
List, Ordered (numbered) List, or Definition List. 

To create a nested list: 

1 Select the list items you want to nest. 

2 Click the Indent button in the Property inspector or choose Text > Indent. 
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Formatting text using HTML styles 

An HTML style is defined by one or more HTML tags (such as B, I, FONT, and 
CENTER) that apply formatting to text. The HTML 4.0 specification released by 
the World Wide Web Consortium (W3C) in early 1998 discourages the use of 
HTML formatting tags in favor of CSS style sheets. In practice, however, HTML 
formatting tags—while offering more limited control over appearance than CSS 
style sheets—are supported by a wider range of browsers than CSS style sheets, 
and likely to remain part of the Web developer’s arsenal for as long as 3.0 and 
earlier browsers make up a measurable proportion of Web traffic. 

For specific information on formatting with HTML tags, see one of the 
following topics: 

• “Changing font characteristics” on page 179 

• “Changing the color of text” on page 181 

• “Aligning text and elements” on page 182 

HTML tags that define the structure of the document rather than its 
appearance—for example, headings, paragraphs, and lists—are still very much 
part of the HTML specification. In fact, if you are planning to use CSS style 
sheets to define the font characteristics for your page, it’s important to use 
standard heading tags, because they help to preserve the structure of your page in 
browsers that do not support CSS style sheets. (To see an example of how this 
works, try viewing Dreamweaver Help in a 3.0 browser.) See “Applying paragraph 
and heading tags” on page 178. 

Using HTML styles 

Use HTML styles to save text and paragraph formatting that you want to use 
elsewhere in your documents. Once you have created an HTML style based on 
one or more HTML tags, you can reapply that formatting to any text in any 
document using the HTML Style palette. 

Unlike CSS styles, HTML style formatting only affects text that you apply it to, 
or text that you create using a selected HTML style. If you change the formatting 
of an HTML style you have created, text that was originally formatted with that 
style is not updated. If you want the ability to change formatting, and 
automatically update all instances of that formatting, use CSS styles; see 
“Formatting text with CSS style sheets” on page 188. 

You can use the HTML Style palette to record the HTML styles you use in your 
site, and then share them with other users, local sites, or remote sites. 
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To display the HTML Style palette, do one of the following: 

• Choose Window > HTML Styles. 

• Click the HTML Styles button in the Launcher. 

• Click the HTML Styles icon (a yellow paragraph symbol on the Mini- 
Launcher at the bottom of the Document window). 


To view an existing HTML style: 

1 In the HTML Style palette, select a style. 

Note that Clear Paragraph Style and Clear Selection Style are used on text 
that has a style applied;, but they are not styles themselves; they cannot be 
viewed or edited. 

2 Right-click (Windows) or Control-click (Macintosh) and choose Edit from the 
context menu, or double-click the HTML style and choose Edit from the 
context menu. 

3 In the Define HTML Style dialog box, specify the settings for the style. 

The Apply To options determine whether the style applies to the selected text 
(Selection) or the current text block (Paragraph). The When Applying options 
determine whether the settings for the style are added to the original text 
formatting (Add to Existing Style), or removed from the existing formatting 
and replaced with the new settings (Clear Existing Style). 


To apply an existing HTML style: 

In the HTML Style palette, select a style. 

• If the Auto Apply checkbox at the bottom of the palette is selected, click the 
style once. 

• If the Auto Apply checkbox is not selected, click the style, then click Apply. 


To clear text formatting in your document: 

1 Select the formatted text. 

2 In the HTML Style palette, click Clear Paragraph Style or Clear Selection Style. 

Clear Paragraph Style removes any formatting from the current text block 
in the document. Clear Selection Style removes any formatting from the 
selected text. 

Note: You can use Clear Paragraph Style and Clear Selection Style to remove any formatting, 
regardless of how the original formatting was applied (for example, through the HTML Style 
palette or the Property inspector). 
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To remove a style from the HTML Style palette: 

1 In the HTML Style palette, deselect the checkbox to turn off the Auto Apply 
option. 

2 Select an HTML style. 

3 Click the Delete Style (trash can) icon in the lower right corner of the palette. 

To create a new HTML style based on existing text: 

1 In your document, select or create text that has the formatting you want to use 
as the basis of your new HTML style. You can use the Property inspector to 
view and apply formatting. 

2 In the HTML Style palette, click the New Style icon in the lower right corner. 

3 In the Define HTML Style dialog box, name the style and adjust the 
formatting, if necessary. 

• Select whether to apply the HTML style to selected text or the entire 
paragraph. Note that a paragraph style applies to the entire text block in which 
the insertion point is located, regardless of what text is actually selected. 

• Select whether to apply the HTML style in addition to the existing style (CSS 
or HTML) of the selected text or paragraph, or to clear the formatting of the 
selection or paragraph with the new HTML style. 

Note that the formatting options in the HTML Style palette match those in 
the Property inspector. 

4 Click OK. 

To create a new HTML style based on an existing HTML style: 

1 Make sure no text is selected in the Document window. 

2 In the HTML Style palette, select a style. 

3 Right-click (Windows) or Control-click (Macintosh) the style, then choose 
Duplicate from the context menu. 

The Define HTML Style dialog box appears. To reset it to the default options, 
click Clear. 

4 Complete steps 3 and 4 in the instructions for creating a new style based on 
existing text. 
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To create a new HTML style from scratch: 

1 In the HTML Style palette, click the New Style icon; you can also choose 
Text > HTML Styles > New Style. 

The Define HTML Style dialog box appears. 

2 Complete steps 3 and 4 in the instructions for creating a new style based on 
existing text. 

Click Clear to reset the dialog box to the default options. 

3 Click OK. 

To edit an existing HTML style: 

1 Make sure no text is selected in the Document window. 

2 In the HTML Style palette, make sure the Auto Apply option is deselected. 

If Auto Apply is turned on, the HTML style will be applied when you select it 
in the HTML Style palette. 

3 In the HTML Style palette, right-click (Windows) or Control-click 
(Macintosh) the style, then choose Edit from the context menu. 

The Define HTML Style dialog box appears. To reset it to the default options, 
click Clear. 

When you edit an HTML style, Dreamweaver does not automatically update 
text that was previously formatted using the HTML style. If you want to 
update formatting applied with a style, use a CSS style sheet; see “Formatting 
text with CSS style sheets” on page 188. 

To share your HTML styles with other sites or users: 

1 Choose Window > Site Files to open the Site window in Site Files view. 

2 In the right pane, open the site root folder, then open the Library folder. 

You’ll notice a file called styles.xml. This file contains all your HTML styles for 
the site. You can put, get, check in, check out, and copy this file as you would 
any other file in your site. You can also create Design Notes for the styles.xml 
file. Note that you must first check out the styles.xml file before you can create 
or edit a style for a remote site. 

For more information on using these options, see “Setting up a remote site” on 
page 140. 
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Formatting text with CSS style sheets 

A style is a group of formatting attributes that controls the appearance of a range 
of text in a single document. A CSS style sheet can be used to control several 
documents at once and includes all of the styles for a document. The advantage of 
using a CSS style sheet over an HTML style is that in addition to being linked to 
multiple documents, when a CSS style is updated or changed, the formatting of 
all the documents that use that style sheet are automatically updated as well. 

CSS styles are identified by name or by HTML tag, allowing you to change an 
attribute of a style and see all text to which that style applies instantly reflect the 
change. CSS styles in HTML documents can control most of the traditional text 
formatting attributes such as font, size, and alignment. CSS styles can also specify 
unique HTML attributes such as positioning, special effects, and mouse rollovers. 

CSS style sheets reside in the HEAD area of a document and define a series of styles. 
CSS styles can define the formatting attributes for HTML tags, ranges of text 
identified by a CLASS attribute, or text that meets criteria conforming to the 
Cascading Style Sheets (CSS) specification. Dreamweaver recognizes styles defined 
in existing documents as long as they conform to CSS guidelines. 

CSS style sheets work in 4.0 and later browsers. Internet Explorer 3.0 recognizes 
some CSS style sheets, but most earlier browsers ignore them. 

The following three types of CSS style sheets are available in Dreamweaver: 

• Custom CSS styles are similar to the styles you use in a word processor, except 
that there is no distinction between character and paragraph styles. You can 
apply CSS custom styles to any range or block of text. If the CSS style is 
applied to a block of text (such as an entire paragraph or unordered list), a 
CLASS attribute is added to the block’s tag (for example, P CLASS ="myStyle" or UL 
CLASS = "myStyle"). If the CSS style is applied to a range of text, SPAN tags 
containing the CLASS attribute are inserted around the selected text. See 
“Applying a custom (class) CSS style” on page 193. 

• HTML tag styles redefine the formatting for a particular tag, such as H1. When 
you create or change a CSS style for the HI tag, all text formatted with the HI 
tag is immediately updated. 

• CSS selector styles redefine the formatting for a particular combination of tags 
(for example, TD H2 applies whenever an H2 header appears inside a table cell) 
or for all tags that contain a specific ID attribute (for example, #myStyle applies 
to all tags that contain the attribute-value pair ID = "myStyle"). 

Manual HTML formatting overrides formatting applied with CSS (or HTML) 
styles. For CSS styles to control the formatting of a paragraph, you must remove 
all manual HTML formatting or HTML styles. 
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Although you can set an unlimited number of CSS style attributes defined by the 
CSS1 specification in Dreamweaver, not all of the attributes appear in the 
Document window. The attributes that do not appear are marked with an asterisk 
(*) in the Style Definition dialog box. Note also that some of the CSS style 
attributes that you can set with Dreamweaver appear differently in Microsoft 
Internet Explorer 4.0 and Netscape Navigator 4.0, and some are not currently 
supported by any browser. 

About CSS style properties 

The Cascading Style Sheets specification (CSS1), which is controlled by the 
World Wide Web Consortium, defines the CSS style properties (for example, 
font, color, padding, margin, word spacing) that control the appearance of Web 
page elements. You can set any CSS1 property using Dreamweaver. 

In Internet Explorer 4.0, you can use a scripting language such as JavaScript or 
VBScript to change the positioning and CSS style properties of elements after the 
page has loaded. In Netscape Navigator 4.0, you cannot change CSS style 
properties after the page has loaded, but you can change positioning properties. 
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Creating or linking to an external CSS style sheet 

A CSS style sheet is an external text file containing styles and formatting 
specifications. If you edit an external CSS style sheet, all documents linked to that 
CSS style sheet are updated with the changes. 

Dreamweaver Help consists of HTML pages that use a linked CSS style sheet 
called help.css. To see what the code for a CSS style definition looks like, open 
the help.css file (located in the Help/html folder) in a text editor. Open any of 
the topic files (those that begin with a number) to see how the CSS style sheet is 
linked to the document using a LINK tag, as well as how specific CSS styles 
are applied. 

To create or link to an external CSS style sheet: 

1 Choose Window > CSS Styles, or click the CSS Styles icon in the Launcher. 

2 In the CSS Style palette, click the Open Style Sheet icon. 

3 In the Edit Style Sheet dialog box, click Link. 

4 In the Link External Style Sheet dialog box, do one of the following: 

• Click Browse (Windows) or Choose (Macintosh) to browse to an external CSS 
style sheet, or type the path to the style sheet in the File/URL box. 

• Create a new external CSS style sheet by entering a new file name (one that 
doesn’t already exist at the specified location). The file name must end in the 
.css extension. 

5 Select the Link or Import option to specify and create the tag used to attach the 
external CSS style sheet to the document, and then click OK. 

Import brings the information in the external CSS style sheet file into the 
current document, while Link accesses and relays the information without 
transferring it.While both Import and Link call all styles in the external CSS 
style sheet into the current document, Link offers more features and works 
in more browsers. 

The name of the external CSS style sheet appears with the identifier (link or 
import) in the list of styles in the Edit Style Sheet dialog box. Complete the 
steps below to create or edit the styles defined in the external CSS style sheet. 

6 In the Edit Style Sheet dialog box, select the name of the external style sheet 
and click Edit. 

The Edit Style Sheet dialog box appears for that style sheet. 

7 Click New to define styles in the external CSS style sheet. 

8 In the New Style dialog box, define the new style. See “Creating a CSS style 
sheet” on page 191. 

9 Click Save when you have finished defining styles. 
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Editing an external CSS style sheet 

When you edit a CSS style sheet that controls the text in your document, you 
instantly reformat all of the text controlled by that CSS style sheet. Your edits 
affect all the documents linked to the style sheet. 

To edit an external CSS style sheet: 

1 Open any document that is linked to the external CSS style sheet you want 
to change. 

2 Do one of the following: 

• Choose Window > CSS Styles or click CSS Styles in the Launcher. Then click 
the Open Style Sheet icon in the CSS Style palette. 

• Choose Text > CSS Styles > Edit Style Sheet. 

3 In the Edit Style Sheet dialog box, select the name of the external style sheet 
and click Edit. 

A second Edit Style Sheet dialog box appears that displays the styles in the 
external style sheet. 

4 Edit the styles. See “Creating a CSS style sheet” on page 191. 

5 Click Save when you have finished editing styles. 

Creating a CSS style sheet 

Create a CSS style sheet to automate the formatting of HTML tags or a range of 
text identified by a CLASS attribute. 

To create a CSS style sheet: 

1 Choose Window > CSS Styles and click the New Style icon in the CSS Style 
palette. 

2 Choose from the following CSS style options: 

Make Custom Style (Class) creates a style that can be applied as a CLASS attribute 
to a range or block of text. 

Redefine HTML Tag redefines the default formatting of a specified HTML tag. 

Use CSS Selector defines the formatting for a particular combination of tags or 
for all tags that contain a specific ID attribute. 
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3 Enter a name, tag, or selector for the new style: 

• Custom CSS style names must begin with a period. If you don’t enter the 
period yourself, Dreamweaver enters it for you. 

• To redefine an HTML tag style, enter an HTML tag or choose one from the 
pop-up menu. 

• For a CSS selector, enter any valid criteria for a selector (for example, TD H2 or 
#myStyle), or choose a selector from the pop-up menu. 

4 Click a panel name on the left side of the dialog box, and choose the formatting 
settings for the new CSS style in the corresponding panel. Leave attributes 
empty if they are not important to the style. 

Attributes that do not appear in the Document window are marked with an 
asterisk (*) in the Style Definition dialog box. Some of the CSS style attributes 
that you can set with Dreamweaver appear differently in Microsoft Internet 
Explorer 4.0 and Netscape Navigator 4.0, and some are not currently 
supported by any browser. 

See the following topics in Dreamweaver Help for information on 
specific settings: 

• Style Definition Type panel 

• Style Definition Background panel 

• Style DefinitionBlock panel 

• Style Definition Box panel 

• Style Definition Border panel 

• Style Definition List panel 

• Style Definition Positioning panel 

• Style Definition Extensions panel 

When you create a custom (class) style, it appears in the CSS Style palette and in 
the Text > CSS Styles submenu. HTML tag styles and CSS selector styles do 
not appear in the CSS Style palette because they cannot be applied; they are 
reflected in the Document window automatically wherever the tag or 
selector occurs. 
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Applying a custom (class) CSS style 

Custom (class) CSS styles are the only type of CSS style that can be applied to any 
text in a document, regardless of which tags control the text. The CSS Style 
palette displays the names of all available styles. 

Do not confuse CSS styles with options such as Bold or Variable in the Text > 
Style submenu; these options are predefined formatting attributes that correspond 
to specific HTML tags. 

When you apply two or more CSS styles to the same text, the styles may conflict 
and produce unexpected results. See “About conflicting styles” on page 194. 

To apply a custom CSS style: 

1 Choose Window > CSS Styles. 

2 Select the text to which you want to apply a CSS style. 

Place the insertion point in a paragraph to apply the style to the entire 
paragraph. 

To specify the exact tag to which the CSS style should be applied, select the 
tag with the tag selector at the bottom left of the Document window. You 
can also change the tag selection with the Apply To pop-up menu in the 
CSS Style palette. 

If you select a range of text within a single paragraph, the CSS style affects only 
the selected range. 

3 Click a style name in the CSS Style palette. 

You can also apply a CSS style by choosing a style name from the Text > CSS 
Styles submenu, or by right-clicking (Windows) or Control-clicking (Macintosh) 
and choosing the style name from the CSS Styles submenu in the context menu. 
The tag of the current selection appears next to the Custom Style command. 
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About conflicting styles 

When you apply two or more CSS styles to the same text, the styles may conflict 
and produce unexpected results. Browsers apply style attributes according to the 
following rules: 

• If two styles are applied to the same text, the browser displays all attributes of 
both styles unless specific attributes conflict. For example, one style may specify 
blue as the text color and the other style may specify red. 

• If attributes from two styles applied to the same text conflict, the browser 
displays the attribute of the innermost style (the style closest to the text itself). 

• If there is a direct conflict, the attributes from CSS styles (styles applied with 
the CLASS attribute) overrule attributes from HTML tag styles. 

In the example that follows, the style defined for H1 might specify the font, size, 
and color for all HI paragraphs, but the custom CSS style .Blue applied to this 
paragraph overrules the color setting in the H1 style. The second custom CSS style 
.Red overrules .Blue because it is inside the .Blue style. 

<H1 xSPAN CLASS = "Blue">This paragraph is controlled by the .Blue custom style and HI 
HTML tag style.<SPAN CLASS = "Red">Except this sentence is controlled by the .Red style. 
</SPAN> 

Now we're back to the .Blue style.</SPANx/H1 > 


Using the CSS Style palette 

Use the CSS Style palette to apply custom CSS styles to the current selection. The 
CSS Style palette displays custom (class) CSS styles only; redefined HTML tags 
and CSS selector styles do not appear in the CSS Style palette, because they are 
automatically applied to any text controlled by the specified tag or selector. (If you 
want to simply cut and paste reusable but not updatable and customizable styles, 
use the HTML Style palette.) 

Choose Window > CSS Styles to display the CSS Style palette. 

Apply To displays the tag of the current selection. Choose a tag from the pop-up 
menu to select a different tag. 

Open Style Sheet opens the Edit Style Sheet dialog box. Edit any of the styles in 
the current document or in an external style sheet. 

See also “Formatting text with CSS style sheets” on page 188. 

Note: Right-click (Windows) or Control-click (Macintosh) the CSS Style palette to open a 
context menu that includes New, Edit, Duplicate, Delete, and Apply commands. 
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Setting Style Sheet Format preferences 

CSS Style Sheet Format preferences control how Dreamweaver writes the 
code that defines CSS styles. CSS styles can be written in a shorthand form that 
some people find easier to work with. Some older versions of browsers do not 
correctly interpret the shorthand. Unless you want Dreamweaver to write styles 
in shorthand, there is no reason to change any of the CSS Style Sheet Format 
preferences. 

Choose Edit > Preferences and select CSS Styles to display CSS Style Sheet 
Format preferences. See also “Formatting text with CSS style sheets” on page 188. 

When Creating Styles Use Shorthand For determines which CSS style attributes 
Dreamweaver writes in shorthand. 

When Editing CSS Styles Use Shorthand controls whether Dreamweaver rewrites 
existing styles in shorthand. Choose If Original Used Shorthand to make 
Dreamweaver leave all styles as they are. Choose According to Settings Above to 
make Dreamweaver rewrite styles in shorthand according to the attributes 
specified in the Use Shorthand For checkboxes. 


Converting CSS styles to HTML markup 

If you have used CSS styles to specify text formatting (such as the family, size, 
color, and decoration of fonts) and later decide that you want to make the 
formatting viewable on a 3.0 browser, you can use the File > Convert > 3.0 
Browser Compatible command to convert as much of the style information as 
possible to HTML tags. 


To convert a file that uses CSS styles to a 3.0 browser-compatible file: 

1 Choose File > Convert >3.0 Browser Compatible. 

2 In the dialog box that appears, select CSS Styles to HTML Markup. 

When you choose the Tables to Layers option, Dreamweaver replaces all layers 
with a single table that preserves the original positioning. 

CSS styles are replaced, where possible, with HTML tags such as B and FONT. 
Any CSS markup that cannot be converted to HTML is removed. See “CSS to 
HTML markup conversion table” on page 196 for information on which styles 
are converted and which are removed. 

3 Click OK. Dreamweaver opens the converted file in a new, untitled window. 

Note: You must perform this conversion procedure each time you change the original file to 
update the 3.0-compatible file. For this reason, it's best to perform this procedure only after 
you are completely satisfied with your original file. 
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CSS to HTML markup conversion table 

The CSS attributes listed in the following table are converted to HTML markup 
with the File > Convert > 3.0 Browser Compatible command. (See “Converting 
CSS styles to HTML markup” on page 195.) Attributes not listed in the table 
are removed. 


CSS attribute 

Converted to 

color 

FONT COLOR 

font-family 

FONT FACE 

font-size 

FONT SIZE ="[ 1 -7]" 

font-style: oblique 

1 

font-style: italic 

1 

font-weight 

B 

list-style-type: square 

UL TYPE="square" 

list-style-type: circle 

UL TYPE="circle" 

list-style-type: disc 

UL TYPE = "disc" 

list-style-type: upper-roman 

OL TYPE="I" 

list-style-type: lower-roman 

OL TYPE="i" 

list-style-type: upper-alpha 

OL TYPE = "A" 

list-style-type: lower-alpha 

OL TYPE = "a" 

list-style 

UL or OL with TYPE as appropriate 

text-align 

P ALIGN or DIV ALIGN as appropriate 

text-decoration: underline 

U 

text-decoration: line-through 

STRIKE 
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Checking spelling 

Use the Check Spelling command in the Text menu to check the spelling in the 
current document. The Check Spelling command ignores HTML tags and 
attribute values. 

By default, the spelling checker uses the U.S. English spelling dictionary. To 
change the dictionary, choose Edit > Preferences > General and select a different 
dictionary from the pop-up menu. Dictionaries for additional languages are 
available for downloading from the Dreamweaver Support Center. 


Check Spelling dialog box 

Use the following options in the Check Spelling dialog box to check the spelling 
in your document. (To display the dialog box, choose Text > Check Spelling.) 

Add to Personal adds the unrecognized word to your personal dictionary. 

To remove words from your personal dictionary, edit the Personal.dat file in 
a text editor. 

Ignore ignores this instance of the unrecognized word. 

Ignore All ignores all instances of the unrecognized word. 

Change replaces this instance of the unrecognized word with text that you type in 
the Change To box or with the selection in the Suggestions list. 

Change All replaces all instances of the unrecognized word. 
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Inserting Images 


Dreamweaver, like most browsers, can display both JPEG and GIF images. 
Dreamweaver, Microsoft Internet Explorer 4.0 and later, and Netscape Navigator 
4.04 and later also support PNG images. 

In general, JPEG is the superior format for photographic or continuous-tone 
images, and GIF is preferred for noncontinuous tone images or those with large 
areas of flat colors. The PNG format is a patent-free replacement for GIF that 
includes support for indexed-color, grayscale, and true-color images. It also 
provides alpha channel support for transparency. PNG is the native file format of 
Macromedia Fireworks. 

To use an image as a page background, specify it as a page property. See “Defining 
a background image or page color” on page 96. To overlap images, insert them in 
layers. See “Using Layers” on page 235. 
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Inserting an image 

When you insert an image into a Dreamweaver document, Dreamweaver 
automatically generates a reference to the file in the HTML. To ensure that this 
reference is correct, the image file must be inside the current site. If it is not, 
Dreamweaver asks whether you want to copy the file to a folder within the 
current site. 

To insert an image: 

1 Do one of the following: 

• Place the insertion point where you want the image to appear in the Document 
window, and then choose Insert > Image or click the Insert Image button on 
the Common panel of the Object palette. 

• Drag the Insert Image button from the Object palette to the desired location in 
the Document window. 

• Drag an image from the desktop to the desired location in the Document 
window; then skip to step 3. 

2 In the dialog box that appears, click Browse (Windows) or Choose (Macintosh) 
to choose a file, or type the path for the image file. 

If you are working in an unsaved document, Dreamweaver generates a file:// 
reference to the image file. When you save the document anywhere in the site, 
Dreamweaver converts the reference to a document-relative path. 

3 Set image properties in the Property inspector. 
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Setting image properties 

To view the following properties in the Property inspector, select an image in the 
Document window. 

The Property inspector initially displays the most commonly used properties. 
Click the expander arrow in the lower right corner to see all properties. 

Name lets you name an image so you can refer to it with a scripting language such 
as JavaScript or VBScript. 

W and H reserve space for an image on a page as it loads in a browser. 
Dreamweaver automatically fills these fields with the image’s original size. Default 
and unlabeled values are pixels. You can also specify the following units: pc (picas), 
pt (points), in (inches), mm (millimeters), and cm (centimeters), and 
combinations thereof, such as 2in+5mm; Dreamweaver converts the values to 
pixels in the HTML source code. 

If you set W and H values that do not correspond to the actual width and height 
of the image, your image may not display properly in a browser. (To restore the 
original values, click the field labels.) You can change these values to scale the 
display size of this instance of the image, but this does not reduce download time, 
because the browser downloads all image data before scaling the image. To reduce 
download time and to ensure that all instances of an image appear at the same 
size, use an image-editing application to scale images. 

Src specifies the source file for the image. Click the folder icon to browse to the 
source file, or type the path. For information on entering paths, see “About 
absolute paths” on page 110. 

Link specifies a hyperlink for the image. Drag the Point-to-File icon to a file in 
the Site window, click the folder icon to browse to a document on your site, or 
type the URL. 

Align aligns an image and text on the same line. See “Aligning elements” on 
page 203. 

Alt specifies alternative text that appears in place of the image for text-only 
browsers or for browsers that have been set to download images manually. For 
visually impaired users who use speech synthesizers with text-only browsers, the 
text is spoken out loud. In some browsers, this text also appears when the pointer 
is over the image. 

V Space and H Space add space, in pixels, above, below, and on both sides of 
the image. 
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Target specifies the frame or window in which the linked page should load. (This 
option is not available when there is no link on the image.) The names of all the 
frames in the current document appear on the list. If the specified frame does not 
exist when the document is opened in a browser, the linked page loads into a new 
window that has the name you specified. Once this window exists, other files can 
be targeted to it. You can also choose from the following reserved target names: 

• blank loads the linked file into a new, unnamed browser window. 

• parent loads the linked file into the parent frameset or window of the frame 
that contains the link. If the frame containing the link is not nested, the linked 
file loads into the full browser window. 

• self loads the linked file into the same frame or window as the link. This target 
is implied, so you generally don’t need to specify it. 

• top loads the linked file into the full browser window, thereby removing 
all frames. 

Low Src specifies the image that should load before the main image. Many 
designers use a 2-bit (black and white) version of the main image because it loads 
quickly and gives visitors an idea of what they’re waiting for, but you can use any 
image with the same dimensions as the main image. 

Border sets the width, in pixels, of the link border around the image. Enter 0 for 
no border. 

Map Name Field enables you to create client-side image maps. See “Creating image 
maps” on page 211. 

Refresh resets the W and H values to the original size of the image. 

Edit launches the image editor you specified in External Editors preferences and 
opens the selected image. When you save your image file and return to 
Dreamweaver, Dreamweaver updates the Document window with the edited 
image. See “Using an external image editor” on page 205. 
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Aligning elements 

The following Align options appear in the Alignment drop-down menu in the 
Property inspector, and can be associated with certain elements, such as images 
and plugins. You can also use the alignment buttons (left, right, and center) to 
place selected elements. 

Browser default generally specifies a baseline alignment. (The default may differ 
depending on the browser.) 

Baseline and Bottom align the text baseline to the bottom of the selected object. 

Absolute bottom aligns the absolute bottom of the text, including descenders (as 
in the letter g) with the bottom of the selected object. 

Top aligns the top of the tallest character in the text line with the top of 
the selected object. 

Text top aligns the tallest character in the text line with the top of the 
selected object. 

Middle aligns the text baseline with the middle of the selected object. 

Absolute middle aligns the middle of the selected object with the middle of 
the text. 

Left places the selected object on the left margin, wrapping text around it to the 
right. If left-aligned text precedes the object on the line, it generally forces left- 
aligned objects to wrap to a new line. 

Right places the object on the right margin, wrapping text around the object to 
the left. If right-aligned text precedes the object on the line, it generally forces 
right-aligned objects to wrap to a new line. 
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Resizing images and other elements 

You can visually resize elements such as images, plugins, Shockwave or Flash 
movies, applets, and ActiveX controls in Dreamweaver’s Document window. 
Visual resizing helps you determine how an element affects the layout at 
different dimensions. 

Resizing resets the WIDTH and HEIGHT attributes of the element. The W and H 
fields in the Property inspector display the current width and height of the 
element as you resize it. The element’s file size does not change. 

Flash movies and other vector-based elements are fully scalable and do not lose 
quality as you resize them. 

Bitmap elements such as GIF, JPEG, and PNG images may become pixelated or 
distorted if you reset their WIDTH and HEIGHT attributes. To maintain the same 
aspect ratio, hold down the Shift key while you resize a bitmap. However, it is 
recommended that you visually resize these elements in Dreamweaver only to 
determine the layout. Once you have determined the ideal size for your image, 
edit the file in an image-editing application. Editing the image may also reduce its 
file size and thus reduce download time. 

To resize an element: 

1 Select the element (for example, an image or Shockwave movie) in the 
Document window. 

Resize handles appear at the bottom and right sides of the element and in the 
bottom right corner. If resize handles don’t appear, either click away from the 
element you want to resize, and then re-select it or click <img> in the tag 
selector to select the element. 

2 Resize the element, by doing one of the following: 

• To adjust the width of the element, drag the selection handle on the right side. 

• To adjust the height of the element, drag the bottom selection handle. 

• To adjust the width and the height of the element at the same time, drag the 
corner selection handle. 

• To preserve the element’s aspect ratio (its width-to-height ratio) as you adjust 
its dimensions, Shift-drag the corner selection handle. 

Elements can be visually resized to a minimum of 6 by 6 pixels. To adjust the 
width and height of an element to a smaller size (for example, 1 by 1 pixel), use 
the Property inspector to enter a numeric value. 

To return a resized element to its original dimensions, click the W and H labels in 
the Property inspector. 
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Using an external image editor 

You can open a selected image in an external image editor directly from 
Dreamweaver. When you return to Dreamweaver after saving an image file, any 
changes you made to the image are visible in the Document window. 

You can use Macromedia Fireworks as your external image editor. Fireworks 3 uses 
Design Notes to determine where the original PNG file is stored on your local 
hard disk, or will prompt you to navigate to the file. 

Fireworks 2 doesn’t use Design Notes, but will prompt you to locate the original 
PNG file. Fireworks 1 automatically searches the folder that contains the selected 
file for a PNG file with the same name. For example, if you select an image whose 
source file is images/myPhoto.gif and images/ also contains a file called 
myPhoto.png, Fireworks opens the PNG file. As Fireworks’ native file format, 
PNG files retain all the original layer, vector, color, and effects information, and 
all elements are fully editable at all times. Files must have the .png file extension to 
be recognized as PNG files by Dreamweaver. 

If you choose any other image editing application as the external image editor and 
launch the editor from within Dreamweaver, the application opens the selected 
image (for example, images/myPhoto.gif). If you prefer, you can manually open 
the original file from which the GIF was generated (for example, myPhoto.psd 
might be the original Photoshop file), make any changes, and regenerate the 
GIF image. Dreamweaver still updates the image in the Document window when 
you return. 

To launch the external image editor, do one of the following: 

• Hold down Control (Windows) or Command (Macintosh) and double-click 
the image you want to edit. 

• Right-click (Windows) or Control-click (Macintosh) the image you want to 
edit, and choose Edit from the context menu. 

• Right-click (Windows) or Control-click (Macintosh) the image you want to 
edit, and choose an external editor from the context menu. 

• Select the image you want to edit, and click Edit Image in the 
Property inspector. 

• Double-click the image file in the Site window to launch the primary image 
editor. If you haven’t specified an image editor, Dreamweaver launches the 
default editor for the file type. 

Note: When you open an image from the Site window, the Fireworks integration features 
described above are not in effect; Fireworks does not open the original PNG file. To use 
the Fireworks integration features, open images from within the Document window. 
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Setting external image editor preferences 

You can set preferences so that Dreamweaver automatically launches different 

applications to edit different image types. For example, you can tell Dreamweaver 

to launch Fireworks when you want to edit a GIF. 

To set an external image editor for a specific file type: 

1 Choose Edit > Preferences and select External Editors. 

2 Click the add (+) button above the Extensions list. 

3 Type the file name extension of the type of image you want to edit (for 
example, .gif), or select one of the listed extensions. 

4 Click the add (+) button above the Editors list. 

5 In the dialog box that appears, choose the application you want to use to edit 
this image type. 

6 Click Make Primary if you want this editor to be the primary editor for the 
image type. 

Dreamweaver automatically uses the primary editor when you choose to edit 
this image type. You can choose the other listed editors from the context menu 
for the image in the Document window. 

To change an existing preference: 

1 In External Editors preferences, click the file extension whose editor you 
want to change. 

2 Use the add (+) or delete (-) buttons above the Editors list to add or remove 
an editor. 

For more information on the other options in External Editors preferences, see 

“Launching an external media editor” on page 282. 
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Optimizing an image in Fireworks 

If you have Fireworks 2 or Fireworks 3, you can use the Optimize Image in 

Fireworks command to quickly optimize images for the Web. 

To use the Optimize Image in Fireworks command: 

1 Select an image in a Dreamweaver document and choose Commands > 
Optimize Image in Fireworks. 

2 If the selected image is a GIF or JPEG file, a dialog box appears asking if 
you would like to use an existing Fireworks document as the source of the 
selected image. 

• Click Yes to open the original PNG file if you created the image in Fireworks. 

• Click No if you did not create the image in Fireworks and skip to step 4. 

3 In the file selection dialog box that appears, navigate to the folder that contains 
the original Fireworks PNG file, select the file, and click OK. 

4 In the dialog box that appears, adjust the setting on the left to change the 
quality and smoothing of a JPEG or the palette and number of colors in a GIF, 
or to change from one file format to another. 

For more information on the options in this dialog box, see Using Fireworks. 

5 The results of your adjustments appear in the Preview pane on the right; the file 
size and estimated download time for the image are listed at the top of the 
Preview pane. When you are happy with the appearance and file size of the 
image, click Update. 

If you changed the format of the image, Dreamweavers link checker prompts 
you to update references to the image. For example, if you changed the format 
of an image called my_image from GIF to JPEG, clicking OK at this prompt 
will change all references to my_image.gif in your site to my_irnage.jpg. 
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Creating a rollover 

A rollover is an image that changes when the pointer moves across it. A rollover 
actually consists of two images: the primary image (the image displayed when the 
page first loads) and the rollover image (the image that appears when the pointer 
moves over the primary image). When you create a rollover, both images must be 
the same size; if the images are not the same size, Dreamweaver automatically 
resizes the second image to match the properties of the first image. 

For information about changing an image in response to a different event (for 
example, a mouse click) or about changing a different image than the one being 
rolled over, see “Swap Image” on page 328. 

To create a rollover: 

1 In the Document window, place the insertion point where you want the 
rollover to appear. 

2 Insert the rollover by using one of these methods: 

• Choose Window > Objects to open the Object palette, and click the 
Rollover button. 

• Choose Insert > Rollover Image. 

3 In the dialog box that appears, enter the following information: 

• Browse and select an image, or type the path and file name of the original 
image in the Original Image field. 

• Browse and select a rollover image, or type the path and file name of the 
rollover image in the Rollover Image field. 

• To create a link, browse and select a file, or replace the # in the Link field with 
a path and file name. 

• To have Dreamweaver preload the images in the browser’s cache, select the 
Preload Images option. 

4 Click OK. 

To test a rollover: 

1 Choose File > Preview in Browser. 

2 In the browser, move the pointer over the primary image. The display should 
switch to the rollover image. 

You can also create a navigation bar by using the Insert > Navigation Bar 
command. See “Inserting a navigation bar” on page 125. 
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Working with Fireworks HTML files 

Dreamweaver makes it easy to paste or import HTML source code created in 
Fireworks 3 into Dreamweaver documents. If you own and use Fireworks, you 
can copy HTML directly to the clipboard in Fireworks and paste it into a 
Dreamweaver document. If you have received Fireworks HTML files from 
another designer, you can use the Insert Fireworks HTML object to import 
the HTML. 

Note: You can also import HTML source code created in Fireworks 2 into a Dreamweaver 
document. However, if such a document contains Simple Rollover or Toggle Group 
behaviors, Dreamweaver does not recognize them and reports an error. 


Pasting Fireworks HTML 

If you use both Fireworks and Dreamweaver concurrently when creating 
documents, the easiest way to insert Fireworks HTML into a Dreamweaver 
document is to copy it to the clipboard. 

To paste Fireworks HTML into a Dreamweaver document: 

1 Save your Dreamweaver document in a defined site. 

2 In Fireworks, choose File > Export. 

3 At the bottom of the Export dialog box, select Dreamweaver 3 from the Style 
pop-up menu and Copy to Clipboard from the Location pop-up menu. 

4 At the top of the Export dialog box, navigate to a location within the local root 
folder of the Dreamweaver site and click Save to save the image file. 

5 In Dreamweaver, place the insertion point in the Document window and 
choose Edit > Paste. 

The image and its associated HTML (and JavaScript, if any) are added to the 
Dreamweaver document in the appropriate places. The image appears in the 
Document window; to see the source code that was added, choose Window > 
HTML Source. 
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Inserting Fireworks HTML 

If you have image and HTML files created in Fireworks 2 or 3, you can import 
the image and its associated HTML source code with the Insert Fireworks 
HTML object. 

To insert Fireworks HTML into a Dreamweaver document: 

1 Save your Dreamweaver document in a defined site. 

2 Place the insertion point in the Document window and do one of 
the following: 

• Click the Insert Fireworks HTML button in the Object palette. 

• Choose Insert > Media > Fireworks HTML. 

3 In the dialog box that appears, click Browse to browse to and select the 
Fireworks HTML file. 

Select the Delete File After Insertion option to move the HTML file to the 
Recycle Bin (Windows) or Trash (Macintosh) when the operation is complete. 

Note If the HTML file is on a network drive, it is permanently deleted, not moved to the 
Recycle Bin or Trash. 

4 Click OK. 

The image and its associated HTML (and JavaScript, if any) are added to the 
Dreamweaver document in the appropriate places. The image appears in the 
Document window; to see the source code that was added, choose Window > 
HTML Source. 
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Creating image maps 

An image map is a image which has been divided into regions or “hotspots”; when 
the “hotspot” is clicked a web page displays. Use the Image inspector to 
graphically create and edit client-side image maps. 

Client-side image maps store the hyperlink information in the HTML document, 
not in a separate map file as do server-side image maps. When the user clicks a 
hotspot in the image, the associated URL is sent directly to the server. This makes 
client-side image maps faster than server-side image maps, because the server does 
not need to interpret where the user clicked. Client-side image maps are 
supported by Netscape Navigator 2.0 and later, NCSA Mosaic 2.1 and 3.0, and all 
versions of Microsoft Internet Explorer. 

Dreamweaver does not alter references to server-side image maps in existing 
documents. You can use both client-side image maps and server-side image maps 
in the same document. Note that browsers that support both types of image maps 
give priority to client-side image maps. To include a server-side image map in a 
document, you have to write the appropriate HTML code. 

To create a client-side image map: 

1 Select the image. 

2 Click the expander arrow in the lower right corner of the Property inspector to 
see all properties. 

3 Type the name for the map in the Map Name field. 

Note: If you are using multiple image maps in the same document be sure to give each 
map a unique name. 

4 To define the image map areas, do one of the following: 

• Select the circle tool and drag the pointer over the image to create a 
circular hotspot. 

• Select the rectangle tool and drag the pointer over the image to create a 
circular hotspot. 

• Select the polygon tool and define an irregularly shaped hotspot by clicking 
once for each corner point. Click on the arrow tool to close the shape. 

When the hotspot is selected, the Hotspot inspector appears beneath the 
Property inspector. For information about the Hotspot inspector, see “Setting 
hotspot properties” on page 213. 

5 In the Hotspot inspector, click the folder icon to browse to file to open when 
the hotspot is clicked, or type the file name in the Link field. 
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6 To make the linked document appear somewhere other than the current 
window or frame, enter a window name in the Target box or choose a frame 
name from the pop-up menu. 

See “Creating links” on page 114. 

7 In the Alt box, type alternative text that is displayed for the hotspot in text-only 
browsers. 

Some browsers display this text as a tooltip when the user pauses the mouse 
pointer over the hotspot. 

8 Repeat steps 4 through 7 to define additional hotspots in the image map. 

To select multiple hotspots in an image map: 

With the image selected, do one of the following: 

• Shift-click the other hotspots you want to select 

• Press Control+A (Windows) or Command+A (Macintosh) 

When you copy an image from one document to another, the hotspots associated 
with that image are also copied. 

You can use the arrow keys or the mouse to move single or multiple hotspots at 
once. You can also choose Modify > Layers and Hotspots to align the hotspots, 
bring them to the front or send them to the back, or make them the same width 
and height. If two hotspots overlap, the first hotspot is dominant. 


212 Chapter 7 



Setting hotspot properties 

The properties listed below appear in the Property inspector when a hotspot 
is selected. 

Map specifies the image map’s name. Create a unique name for each image map 
within a document. 

Link specifies the file or URL to be displayed when the user clicks the hotspot. If 
you use a file, enter a path that is relative to your document. (File names that 
begin with file: 11 are not relative). 

Target specifies the frame or window in which the linked page should load. The 
target option isn’t available until the selected hotspot contains a link. 

The names of all the frames in the current document appear on the list. If the 
specified frame does not exist when the current document is opened in a browser, 
the linked page loads into a new window that has the name you specified. You can 
also choose from the following reserved target names: 

• blank loads the linked file into a new, unnamed browser window. 

• parent loads the linked file into the parent frameset or window of the frame 
that contains the link. If the frame containing the link is not nested, the linked 
file loads into the full browser window. 

• self loads the linked file into the same frame or window as the link. This target 
is implied, so you generally don’t need to specify it. 

• _top loads the linked file into the full browser window, thereby removing 
all frames. 

Alt specifies alternative text that appears in place of the image for text-only 
browsers or for browsers that have been set to download images manually. 
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Applying behaviors to images 

You can apply any available behavior to an image or image hotspot. When you 
apply a behavior to a hotspot, Dreamweaver inserts the HTML source code into 
the AREA tag. There are three behaviors that apply specifically to images: Preload 
Images, Swap Image, and Swap Image Restore. 

Preload Images loads images that do not appear on the page right away (such as 
those that will be swapped in with timelines, behaviors, layers, or JavaScript) into 
the browser cache. This prevents delays caused by downloading when it is time for 
the images to appear. See “Preload Images” on page 320. 

Swap Image swaps one image for another by changing the SRC attribute of the IMG 
tag. Use this action to create button rollovers and other image effects (including 
swapping more than one image at a time). See “Swap Image” on page 328. 

Swap Image Restore restores the last set of swapped images to their previous 
source files. This action is automatically added whenever you attach the Swap 
Image action to an object by default; you should never need to select it manually. 
See “Swap Image Restore” on page 329. 

You can also use behaviors to create more sophisticated navigation systems, such 
as a navigation bar or a jump menu. See “Creating navigation bars” on page 124 
and “Creating jump menus” on page 122. 
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Creating Tables 


Tables are an extremely powerful Web design tool for laying out data and images 
on an HTML page. Tables provide Web designers ways to add vertical and 
horizontal structure to a page. 

Tables consist of three basic components: 

• rows (horizontal spacing) 

• columns (vertical spacing) 

• cells (the container created when a row and column intersect) 

Use tables to lay out tabular data, to design columns on a page, or to lay out text 
and graphics on a Web page. Once you create a table you can easily modify both 
the appearance and structure of HTML tables. You can add content; add, delete, 
split, and merge rows and columns; modify table, row, or cell properties to add 
color and alignment; and copy and paste cells. 

For more advanced layout ideas you can insert a table within a table, adding even 
more flexibility to your design. 

Using Dreamweaver, you can easily convert between a table layout and a layer 
layout. Both tables and layers allow you to control the positioning of page 
elements, but layers aren’t supported in 3.0 and earlier browsers. If your design 
process requires rapid repositioning of content, you can use layers to lay out a page 
and then convert the layers to a table for viewing in older browsers. See “Using 
layers to design tables” on page 250. 
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Inserting a table 

Use the Object palette or the Insert menu to create a new table. 

To insert a table: 

1 Do one of the following: 

• In the Document window, place the insertion point where you want the table 
to appear, then click the Table button on the Common panel of the Object 
palette, or choose Insert > Table. 

• Drag the Table button from the Object palette to the desired insertion point on 
the page. 

The Insert Table dialog box appears. 

2 In the dialog box, accept the current values or type new values. 

Note: The Insert Table dialog box retains the values of the most recent settings you 
entered for a table. 

• In the Rows field, specify the number of table rows. 

• In the Columns field, specify the number of table columns. 

• In the Cell Padding field, specify the number of pixels between the cell content 
and the cell boundary (or wall). 

• In the Cell Spacing field, specify the number of pixels between each table cell. 

• In the Width field, specify the width of the table as a number of pixels or as a 
percentage of the browser window. 

• In the Border field, specify the pixel width of the table border. Enter 0 if you 
don’t want a border. 

3 Click OK to create the table. 

If you want to insert a table without having to first specify these options, turn off 
the Show Dialog When Inserting Objects option in the General preferences. See 
“Setting preferences” on page 73. 
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Adding content to a table cell 

You can add text and images to table cells. You can also set properties of an image 
that you insert in a table. 

To add text to a table: 

1 Click in a cell in which you want to add text, and do one of the following: 

• Type text into the table. Table cells automatically expand as you type. 

• Paste text copied from another document. Use the Paste as Text command 
to preserve paragraph markers. See “Adding text and inserting objects” on 
page 88. 

2 Press Tab to move to the next cell or press Shift+Tab to move to the previous 
cell. Pressing Tab in the last cell of a table automatically adds another row to 
the table. 

You can also use the arrow keys to move between cells. 

To add an image to a table: 

1 Click in the cell in which you want to add an image. 

2 Click the Insert Image button in the Common panel of the Object palette, or 
choose Insert > Image. 

3 In the Select Image Source dialog box, select an image file. 

For information on setting image properties, see “Setting image properties” on 
page 201. 
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Importing table data 

Data that has been created in another application (such as Microsoft Excel) and 
saved in a delimited format (separated by tabs, commas, colons, semicolons, or 
other delimiters) can be imported into Dreamweaver and reformatted as a table. 

To import table data: 

1 Do one of the following: 

• Choose File > Import > Import Table Data. 

• Choose Insert > Tabular Data. 

The Import Table Data or Insert Tabular Data dialog box appears, depending 
on your selection. Aside from their titles, these dialog boxes are identical. 



2 In the Data File field, enter the name of the file to import. 

3 From the Delimiter pop-up menu, select the delimiter format that matches the 
format of the document you’re importing. 

If you select Other, a field appears to the right of the pop-up menu. Enter the 
delimiter that was used to separate the table data. 

Note If you do not select (or specify) the delimiter used when the file was saved, the file 
will not import properly, and your data will not be correctly formatted in a table. No error 
or warning message displays to alert that there is a problem. 

4 For Table Width, select one of the following options: 

• Select Fit to Data to create a table that adjusts to the longest text string in each 
table column. 

• Select Set to specify a table width as a percentage of the browser window or as a 
number of pixels. 
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5 Select table formatting options: 

• In the Cell Padding field, specify the number of pixels between the cell content 
and the cell boundary (or wall). 

• In the Cell Spacing field, specify the number of pixels between each table cell. 

• In the Format Top Row field, select from four formatting options: no 
formatting, bold, italic, or bold italic. 

• In the Border field, specify the pixel width of the table border. Enter 0 if you 
don’t want a border. 

6 Click OK. 

Selecting table elements 

With a single gesture you can select an entire table, row, or column, or a 
contiguous range of cells within the table. Once the table or individual cells are 
selected, you can do the following: 

• Modify the appearance of selected cells or the text contained in them. See 
“Formatting tables” on page 221. 

• Copy and paste adjacent cells. See “Copying and pasting cells” on page 226. 

You can also select multiple nonadjacent cells in a table and modify the properties 
of those cells. You cannot copy or paste nonadjacent cell selections. 

To select the entire table, do one of the following: 

• Click the top left corner of the table, or click anywhere on the right or 
bottom edge. 

• Click once in the table and choose Modify > Table > Select Table. 

• Click once in the table and choose Edit > Select All. 

• Position the insertion point anywhere inside the table, and select the <table> 
tag at the bottom left corner of the Document window. 

Selection handles appear around the table when it is selected. 
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To select rows or columns, do one of the following: 

• Position the insertion point at the left margin of a row or at the top of a 
column. Click when the selection arrow appears. 



• Click in a cell, and drag across or down to select multiple rows or columns. 

To select one or more cells, do one of the following: 

• Click in a cell, and drag down or across to another cell. 

• Click in one cell and then Shift-click another cell. All of the cells within the 
rectangular region are selected. 







r 


To select nonadjacent cells, do one of the following: 

• Press Control (Windows) or Command (Macintosh) and click in the table to 
add cells, rows, or columns to the selection. 

• Select multiple cells in the table, and then press Control (Windows) or 
Command (Macintosh) and click cells, rows, or columns to deselect 
individual cells. 
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Formatting tables 

You can change the appearance of tables by setting properties for the table and 
table cells or by applying a preset design to the table. See “Setting table properties” 
on page 222, “Setting column, row, and cell properties” on page 223, and 
“Formatting a table with a preset design” on page 225. 

To format text in tables, you can apply formatting to selected text or use styles. See 
“Formatting Text” on page 177. 


About table tags 

When formatting tables in the Document window, you can define properties that 
apply to the entire table or to selected rows, columns, or cells in the table. When a 
property such as background color or alignment is set one way for the whole table 
and another way for individual table cells, it is useful to understand how 
Dreamweaver interprets the HTML source code. 

When the same property is set more than once in a table, it is interpreted in this 
way: cell formatting, which is part of the TD tag, takes precedence over table row 
formatting (the TR tag), which in turn takes precedence over table formatting (the 
TABLE tag). Therefore, if you specify a background color of blue for a single cell 
and then set the background color of the entire table to yellow, the blue cell will 
not change to yellow, since the TD tag takes precedence over the TABLE tag. 

In the following example, the TABLE tag sets a background color of yellow 
(#FFFF99) for the entire table. The first TR tag changes those cells to green 
(#33FF66), and the second TD tag changes the top center cell to blue (#333399). 
The TR and TD tags in the bottom row have not been altered, so those cells take on 
the table color, which is yellow. 

<TABLE BORDER="1" WIDTH = ll 75%" BGCOLOR="#FFFF99"> 

<TR BGCOLOR="#33FF66"> 

<TD>&nbsp;</TD> 

<TD BGCOLOR="#333399">&nbsp;</TD> 

<TD>&nbsp;</TD> 

</TR> 

<TR> 

<TD>&nbsp;</TD> 

<TD>&nbsp;</TD> 

<TD>&nbsp;</TD> 

</TR> 

</TAB LE> 
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Setting table properties 

The Property inspector displays table properties when a table is selected. 

You can also use the Format Table command to quickly apply a preset design to a 
selected table. See “Formatting a table with a preset design” on page 225. 

To specify table properties: 

1 Select the table. 

2 Choose Window > Properties to open the Property inspector. Click the 
expander arrow in the lower right corner to see all properties. 
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To name the table: 

• In the Table Name field, type a name for the table. 


To select table layout options: 

• In the Rows and Cols fields, specify the number of rows and columns in 
the table. 

• In the W and H fields, specify the width and height of the table as a number of 
pixels or as a percentage of the browser window. You usually don’t need to set 
the height of a table. 

• Use the Align field to specify how a table aligns with other elements in the same 
paragraph, such as text or images. Left aligns the table to the left of other 
elements, right aligns the table to the right of other elements, and Center 
centers the table. You can left-align, right-align, or center the table relative to 
the other elements. You can also choose the browser’s default alignment. 

• In the V Space and H Space fields, specify the number of pixels of white space 
to leave above, below, and on both sides of the table. 

• Use the Clear Row Heights and Clear Column Widths buttons to delete all 
table row height and column width values from the table. 

• Use the Convert Table Widths to Pixels button to convert the table width from 
a percentage of the browser window to its current width in pixels. 

• Use the Convert Table Widths to Percent button to convert the current table 
width from pixels to a percentage of the browser window. 
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To set cell layout, choose from the following options: 

• In the CellPad field, specify the number of pixels between the cell content and 
the cell boundary (or wall). 

• In the CellSpace field, specify the number of pixels between each table cell. 

When cell spacing and cell padding are not assigned specific values, Netscape 
Navigator, Microsoft Internet Explorer, and Dreamweaver all display the table as 
if cell spacing were set to 2 and cell padding were set to 1. 

To set table borders, choose from the following options: 

• In the Border field, specify the width of the table border in pixels. Most 
browsers display the border as a three-dimensional line. 

If you are using the table for page layout, specify a border value of 0. To 
view cell and table boundaries when the border is set to 0, choose View > 

Table Borders. 

• Use the Light Brdr and Dark Brdr fields to select border colors that have a 
highlight and shadow effect, respectively, giving the border a three-dimensional 
appearance. (To return to the default gray shades, remove the color values and 
leave the fields blank.) 

• Use the Brdr field to select a border color for the entire table. 

• Use the Bg options to select the background image or background color for 
the table. 

Setting column, row, and cell properties 

Select any combination of cells and then use the Property inspector to change the 
appearance of individual cells, rows, or columns. To select cells, rows, and 
columns, see “Selecting table elements” on page 219. To apply formatting to the 
entire table, see “Setting table properties” on page 222. 

To format a row, column, or cell: 

1 Select any combination of cells in the table. 

2 Choose Window > Properties to open the Property inspector, and click the 
expander arrow in the lower right corner to see all properties. 
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3 Choose from the following appearance options: 

• Use the Horz pop-up menu to set the horizontal alignment of a cell’s, column’s, 
or row’s contents. You can align the contents to the left, right, or center, or to 
the browser’s default (usually left for regular cells and center for header cells). 

• Use the Vert pop-up menu to set the vertical alignment of the cell’s, column’s, 
or row’s contents. You can align the contents to the top, middle, bottom, or 
baseline, or to the browser’s default (usually middle). 

• In the W and H fields, specify the width and height of selected cells in pixels. 
To use percentages, follow the value with a percent symbol (%). 

• To set a background image for a cell, column, or row, use the top Bg field. 
Click the folder icon to browse to an image; you can also type the image’s path 
or use the Point-to-File icon. 

• To set the background color for a cell, column, or row, use the bottom Bg 
field. You can use the color picker or type the hexadecimal code for the color 
you want. 

• To set a border color for cells, use the Brdr option. 

4 Choose from the following layout options: 

• Click the Merge Cells button to combine selected cells, rows, or columns, 
creating one cell. See “Splitting and merging cells” on page 231. 

• Click the Split Cell button to divide a cell, creating two cells. See “Splitting and 
merging cells” on page 231. 

• Select No Wrap to prevent word wrapping. This causes cells to widen to 
accommodate all data as you type it or paste it into a cell. (Normally, 
cells expand horizontally to accommodate the longest word and then 
expand vertically.) 

• Select Header to format the selected cells or rows as a table header. The 
contents of table header cells are bold and centered by default. 
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Formatting a table with a preset design 

Use the Format Table command to quickly apply a preset design to a table. You 
can then select options to further customize the design. 

To use a preset design: 

1 Select the table and choose Commands > Format Table. 

2 In the dialog box that appears, choose a design scheme from the list on the left. 
The table updates to display a sample of the design. 

3 To further customize the design, make changes to the Row Colors, Top Row, 
and Left Col options. 

4 To modify the border width, enter a value in the Border field. Enter 0 if you 
don’t want a border. 

5 To apply the design to the table cells (TD tags) rather than table rows (TR tags), 
select Apply All Attributes to TD Tags Instead of TR Tags. 

Formatting applied to table cells takes precedence over formatting applied to 
table rows. Fiowever, formatting applied to table rows results in cleaner, more 
concise FITML source code. See “Formatting tables” on page 221. 

6 Click Apply or OK to format the table with the selected design. 
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Copying and pasting cells 

You can copy and paste multiple table cells at one time, preserving the cell’s 
formatting, or you can copy and paste only the contents of the cell. 

Cells can be pasted at an insertion point or in place of a selection in an existing 
table. To paste multiple table cells, the contents of the Clipboard must be 
compatible with the structure of the table or the selection in the table in which the 
cells will be pasted. 

To cut or copy cells in a table: 

1 Select one or more cells in the table. 

To be cut or copied, the selected cells must form a rectangle. (See “Selecting 
table elements” on page 219.) 


when 

what 

where 

09.2558 

3pm-9pm 

Honey Festival Featuring the Sonoma Strings 

California, Sonoma 

10.0158 

11am-1pm 

Pear Canning Demonstration 

Bend. Oregon 

10.0858 

7pm -9pm 

Benefit for Southwest Chamber Ensemble 

Scottsdale, Arizona 


Correct selection: The cells can be cut or copied. 


when 

what 

where 

095558 

3pm -9pm 

Honey Festival Featuring the Sonoma Strings 

California, Sonoma 

10.0158 

llam-lpm 

Pear Canning Demonstration 

Bend, Oregon 

10.0858 

7pm-9pm 

Benefit for Southwest Chamber Ensemble 

Scottsdale, Arizona 


Incorrect selection: These cells can’t be cut or copied. 

2 Cut or copy the cells using the commands in the Edit menu. 

If you select the entire row or column, the row or column is removed from the 
table when you choose Edit > Cut. 
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To paste table cells: 

1 Choose where to paste the cells. 

• To paste cells before or above a particular cell, click in that cell. 

• To create new table with the pasted cells, click wherever you want the table to 
appear (as long you don’t click inside another table). 

2 Choose Edit > Paste. 

If you are pasting entire rows or columns into an existing table, the rows or 
columns are added to the table. If you are pasting an individual cell, the 
contents of the selected cell are replaced, as long as the Clipboard contents are 
compatible with the selected cell. If you are pasting outside a table, the rows, 
columns, or cells are used to define a new table. 

To remove cell content but leave the cells intact: 

1 Select one or more cells. 

2 Choose Edit > Clear or press Delete. 

Note: If you select all the cells in a row or column, the row or column—not just its 
contents—is removed from the table. 

To copy and paste the contents of cells: 

1 Select the text and choose Edit > Copy Text Only. 

Only the text from the selected cells is copied onto the Clipboard. 

2 Click in a single cell or elsewhere in the Document window, and choose Edit > 
Paste as Text. 

You can’t paste the selection into a selection of multiple cells. 
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Resizing tables and cells 

You can resize the entire table or individual rows and columns. When you resize 
the entire table, all of the cells in the table change proportionally. 

To resize the table: 

1 Select the table. 

2 Drag one of the selection handles to resize the table along that dimension. 
Dragging the corner handle resizes both dimensions. 

To change the size of a row or column, do one of the following: 

• To change row height, drag the bottom row border. 

• To change column width, drag the right column border. 


Changing column widths 

The Property inspector lets you specify the width of a column in three ways. 

To set the column width: 

1 Click in any of the columns’ cells or select the column. 

2 Choose Window > Properties to open the Property inspector. 

3 In the W field, do one of the following: 

• Enter a number to set the column width to the specified number of pixels. 

• Enter a number followed by the percent symbol (%) to set the column width to 
a percentage of the table width. 

• Leave the field blank (the default) to let the browser and Dreamweaver 
determine the proper width based on the contents of the cell and the widths of 
the other columns. Generally, space is allocated based on the longest line or the 
widest image. This is why one column sometimes becomes much larger than 
the other columns in the table when you add content to it. 
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Clearing column widths and row heights 

The simplest way to set column widths and row heights is to drag the borders of 
the table. Dragging a column or row border automatically sets specific values for 
all of the columns or rows, either in pixels or as percentages of the table’s current 
dimensions, depending on how the table width is specified. 

If you can’t get the desired result by dragging table borders, you can clear the 
column widths and start over. 

To change widths and heights, do one of the following: 

• Select the table, choose Modify > Table, and choose Clear Cell Heights or Clear 
Cell Widths. 

• Choose Window > HTML and change the widths and heights directly in the 
HTML Source inspector. 

• In the Property inspector, enter specific width and height values in the W and 
H boxes. 
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Adding and removing rows and columns 

Use the commands in the Modify > Table submenu or the commands in the 

context menu to add and remove rows and columns from a table. 

To add rows or columns: 

1 Click in a cell where you want the new row or column to appear. 

2 Do one of the following: 

• To add a row, choose Modify > Table > Insert Row, or choose Table > Insert 
Row from the context menu. 

• To add a column, choose Modify > Table > Insert Column, or choose Table > 
Insert Column from the context menu. 

• To add both rows and columns, choose Modify > Table > Insert Rows 
or Columns, or choose Table > Insert Rows or Columns from the 
context menu. 

3 In the dialog box that appears, enter the number of rows or columns you want 
to add, and specify whether the new rows or columns should appear before or 
after the selected row or column. 

4 Click OK. 

To delete a row or column: 

1 Click in a cell within the row or column you want to delete. 

2 Choose one of the following options: 

• To delete a row, choose Modify > Table > Delete Row, or choose Table > Delete 
Row from the context menu. 

• To delete a column, choose Modify > Table > Delete Column, or choose 
Table > Delete Column from the context menu. 

To add or delete rows or columns from the bottom and right of a table: 

1 Select the entire table. (Click the table’s upper left corner, or click once in the 
table and choose Modify > Table > Select Table.) 

2 In the Property inspector, do one of the following: 

• Increase the row or column value to add rows. 

• Decrease the row or column value to delete rows. 

Dreamweaver adds and removes rows from the bottom of the table, and it adds 
and removes columns to the right. Dreamweaver does not warn you if you are 
deleting rows and columns that contain data. 
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Nesting tables 

A nested table is a table within a table. You can configure a nested table as you 
would any other table; however, its width is limited by the width of the cell in 
which it appears. 



To nest a table within a table cell: 

1 Do one of the following: 

• Click in the cell where you want to insert the second table and choose 
Insert > Table. 

• Click in the cell where you want to insert the second table, then click the Table 
button on the Common panel of the Object palette. 

• Drag the Table button on the Common panel of the Object palette to the cell 
where you want to insert the second table. 

2 Specify the table properties in the Insert Table dialog box, and click OK. 

Splitting and merging cells 

Use the Property inspector or the commands in the Modify > Table submenu to 
split or merge cells. You can merge any number of adjacent cells—as long as the 
entire selection is rectangular—to produce a single cell that spans several columns 
or rows. You can split a cell into any number of rows or columns, regardless of 
whether it was previously merged. Dreamweaver automatically restructures the 
table (adds any necessary COLSPAN or ROWSPAN attributes) to create the specified 
arrangement. 

In the following illustration, the cells in the middle of the first two rows have been 
merged so that they span two rows. 



1 1 

L J 



II 1 
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To merge two or more cells in a table: 

1 Select the cells you want to merge. 

The selected cells must be contiguous and in the shape of a rectangle. 


when 

what 

where 

09.26.98 

3pm -9pm 

Honey Festival Featuring the Sonoma Strings 

California, Sonoma 

10.0138 

11am -1pm 

Pear Canning Demonstration 

Bend, Oregon 

10.08.98 

7pm -9pm 

Benefitfor Southwest Chamber Ensemble 

Scottsdale, Arizona 

10.3038 

8pm -10pm 

Candlelight Walk through the Orchards 

Monterey, California 


This selection is in the form of a rectangle, so the cells can be merged. 


when 

what 

where 

0936.98 

3pm -9pm 

Honey Festival Featuring the Sonoma Strings 

California, Sonoma 

10.0138 

11am -1pm 

Pear Canning Demonstration 

Bend, Oregon 

10.08.98 

7pm -9pm 

10.3038 

8pm -10pm 

Benefitfor Southwest Chamber Ensemble 

Scottsdale, Arizona 

Candlelight Walk through the Orchards 

Monterey, California 


This table selection is not in the shape of a rectangle, so the cells can’t be merged. 

2 Choose Modify > Table > Merge Cells, or click the Merge Cell button in the 
Property inspector. 

The contents of the individual cells are placed in the resulting merged cell. The 
properties of the first cell selected are applied to the merged cell. 

To split a merged cell: 

1 Click in the cell or select a cell. 

2 Choose Modify > Table > Split Cells, or click the Split Cell button in the 
Property inspector. 

3 In the Split Cell dialog box, choose whether to split the cell into rows or 
columns, and then enter the number of rows or columns. 
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Sorting tables 

You can perform a simple table sort based on the contents of a single column. 

You can also perform a more complicated table sort based on the contents of 

two columns. 

You cannot sort tables that contain COLSPAN or ROWSPAN attributes—that is, 

tables that contain merged cells. (For details about merged cells, see “Splitting and 

merging cells” on page 231.) 

To sort a table: 

1 Select the table and choose Commands > Sort Table. 

2 In the dialog box that appears, choose from the following options: 

• Select the column to sort in the Sort By option. 

• Select whether you want to sort the column alphabetically or numerically in 
the Order option. 

This option is important when the contents of a column are numerical. An 
alphabetic sort applied to a list of one- and two-digit numbers will result in an 
alphanumeric sort (such as 1, 10, 2, 20, 3, 30) rather than a straight numeric 
sort (such as 1,2, 3, 10, 20, 30). 

• Select Ascending (A to Z or low to high) or Descending for the sort order. 

3 To perform a secondary sort on a different column, specify the sort options in 
the Then By pop-up menu. 

4 Select the Sort Includes First Row option to include the first row in the sort. If 
the first row is a heading that shouldn’t be moved, leave this option deselected. 

5 Click Apply or OK to sort the table. 
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Exporting table data 

To export table data you create in Dreamweaver, you must save the data in a file 
format that accepts delimited data. Delimiter separators you can use are commas, 
colons, semicolons, or spaces. 

You cannot select portions of a table to export; when you export a table, the entire 
table is exported. If you want only particular data from a table—for example, the 
first six rows or the first six columns—create a new table, copy the information to 
the new table, and export the new table. 

To export a table: 

1 Place the insertion point in any cell of the table to be exported. 

2 Choose File > Export > Export Table. 

The Export Table dialog box appears. 



3 In the Delimiter pop-up menu, select a delimiter value for the table data. 

4 In the Line Breaks pop-up menu, select line breaks for the operating system for 
which you are exporting the file—Windows, Macintosh, or UNIX. 

5 Click Export. 

6 In the dialog box that appears, type a name for the file and click Save. 
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CHAPTER 9 

Using Layers 


A layer is a container for HTML content, usually delineated by the DIV or SPAN 
tag, that you can position anywhere on a page. Layers can contain text, images, 
forms, plug-in objects, and even other layers—any element you can place in the 
body of an HTML document you can also place in a layer. 

Layers provide Web page designers fine control over the exact pixel placement of 
elements. By putting page elements in layers, you can control which objects 
appear in front of each other and which ones are displaced or hidden. You can also 
use a timeline to move a layer or several layers simultaneously across a screen. 

In Dreamweaver you can use two layer formats for positioning content on a page: 
CSS layers and Netscape layers. 

• CSS layers (also known as CSS-P elements) position content on a page 
using the DIV and SPAN tags. The properties of CSS layers are defined by the 
World Wide Web Consortium’s Positioning HTML Elements with Cascading 
Style Sheets. 

• Netscape layers position content on a page using the Netscape LAYER and ILAYER 
tags. The properties of Netscape layers are defined by Netscape’s proprietary 
layer format. 

Both Internet Explorer 4.0 and Netscape Navigator 4.0 support layers created 
using the DIV and SPAN tags. Only Navigator supports layers created with the 
LAYER and ILAYER tags. Earlier versions of both browsers will display the contents of 
a layer but will not position them. 

Positioning properties for layers include left and top {x and y coordinates, 
respectively), z-index (also called the stacking order), and visibility. Positioned 
elements can be defined with the DIV, SPAN, LAYER, and ILAYER tags in 
Dreamweaver. See “Setting Layer preferences” on page 239. 
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Creating layers 

Create layers using the insertion, drag and drop, or drawing technique. Once a 
layer is created, use the Layer palette to select it, nest it inside another layer, or 
change its stacking order. See “About the Layer palette” on page 237. 

Default layer properties (tag, visibility, height and width, and so on) are specified 
in Layer preferences. To change the default settings, choose Edit > Preferences and 
select Layers. See “Setting Layer preferences” on page 239. 

By default, Dreamweaver creates layers with the DIV tag and inserts layer code at 
the insertion point, or when drawing layers, at the top of the page, just after the 
BODY tag. If you create a nested layer, Dreamweaver inserts the code inside the tag 
that defines the parent layer. 

When creating layers, to prevent them from overlapping each other, turn on the 
Prevent Overlaps option in the Layer palette or choose View > Prevent Layer 
Overlaps. See “Preventing layer overlaps” on page 251. 

To create a layer, do one of the following: 

• To insert a layer, place the insertion point in the Document window where you 
want to position the layer and then choose Insert > Layer. 

• To drag and drop a layer, drag the Layer button from the Object palette to the 
Document window. 

• To draw a layer, click the Layer button in the Object palette; in the Document 
window, drag to draw a layer. 

• To draw a number of layers, click the Layer button in the Object palette, hold 
down the Shift key, and draw a layer in the Document window. You can 
continue to draw new layers as long as you do not release the Shift key. 

For each layer you create, a layer marker appears at the top left of the page, in 
the Document window. Layer markers will appear in other positions on the 
page if you add layers after adding paragraph returns in the Document window. 

If layer markers aren’t visible, choose View > Invisible Elements. See “Setting 
Invisible Elements preferences” on page 92. When you’re viewing invisible 
elements, other elements on a page may appear to shift position. Invisible 
elements are visible only in the Document window; when the page is viewed 
through a browser, the other elements will appear in their proper position. 
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About the Layer palette 

The Layer palette is a visual map of the layers in your document. Choose 
Window > Layers or press FI 1 to open the Layer palette. Layers are displayed as a 
stacked list of names; the first created layer is at the bottom of the list, and the 
most recently created layer is at the top of the list. Nested layers are displayed as 
names connected to parent layers. Click the expander arrow to show or hide 
nested layers. 

Use the Layer palette to prevent overlaps, to change the visibility of layers, to nest 
or stack layers, and to select one or more layers. 

• To nest a layer within another layer, see “Nesting layers” on page 238. 

• To select one or more layers, see “Manipulating layers” on page 243. 

• To change the stacking order of a layer, see “Changing the stacking order of 
layers” on page 248. 

• To change the visibility of a layer, see “Changing layer visibility” on page 249. 

• To prevent layers from overlapping each other, see “Preventing layer overlaps” 
on page 251. 
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Nesting layers 

A nested layer is a layer created inside another layer. Use the Layer palette or the 
insertion, drag and drop, or drawing technique to create nested layers. 

You can use nesting to group layers together. A nested layer moves with its parent 
layer and inherits its visibility. Netscape layers created with the LAYER and I LAYER 
tags expand to include their child’s width and height. 

The following is sample HTML code for a nested layer: 

<div id = "Parent" style="position:absolute; left:56px; top:54px; width:124px; height: 158px; 
z-index:1 ;"> 

Content inside the parent layer. 

<div id="Nested" style="p° s ition:absolute; left:97px; top: 114px; width:54px; height:69px; 
z-index:1 ;"> 

Content inside the nested layer. 

</div> 

</div> 

When drawing layers, use Layer preferences to force a layer created inside another 
layer to be a nested layer. Choose Edit > Preferences, select Layers, and click the 
Nesting checkbox. See “Setting Layer preferences” on page 239. 

To create a nested layer, do one of the following: 

• To insert a nested layer, place the insertion point inside an existing layer and 
choose Insert > Layer. 

• To drag and drop a nested layer, drag the Layer button from the Object palette, 
then drop it inside an existing layer. 

• To draw a nested layer, click the Layer button in the Object palette; then, inside 
an existing layer, drag to draw the nested layer. If Nesting is turned off in Layers 
preferences, press Control (Windows) or Command (Macintosh) to draw a 
layer inside an existing layer. 

To create a nested layer using the Layer palette: 

1 Choose Window > Layers or press FI 1 to open the Layer palette. 

2 Press the Control key (Windows) or Command key (Macintosh) and select a 
layer in the Layer palette, then drag it to the target layer. 

3 Release the mouse button when a box appears around the name of the 
target layer. 
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Setting Layer preferences 

Use Layer preferences to define the default settings for new layers you create. 
Choose Edit > Preferences and then click Layers to change Layer preferences. 

Tag determines the default tag used to define the layer. SPAN and DIV create CSS 
layers; LAYER and ILAYER create Netscape layers. 

Visibility determines whether layers are visible by default. 

Width and Height set the default width and height of layers created by 
Insert > Layer. 

Background Color specifies the default background color. 

Background Image specifies a default background image. 

Nesting makes a layer drawn within the boundaries of an existing layer a nested 
layer. Press Control (Windows) or Command (Macintosh) to temporarily change 
this setting while you’re drawing a layer. 

Netscape 4 Compatibility inserts JavaScript in the HEAD of a document and fixes 
how Netscape CSS layers resize in a browser. You can also add or remove the 
JavaScript, by choosing Commands > Add/Remove Netscape Resize Fix. 

Setting Layer properties 

Use the Property inspector to specify the name and location of a layer as well as to 
set other layer options. To see all of the following properties, click the expander 
arrow in the lower right corner of the Property inspector. 

Layer ID allows you to specify a name to identify the layer in the Layer palette and 
for scripting. Enter a name in the unlabeled box on the left side of the Property 
inspector. Use only standard alphanumeric characters for a layer name. Do not use 
special characters such as spaces, hyphens, slashes, or periods. 

L and T specify the position of the layer relative to the top left corner of the page or 
parent layer. 

W and H specify the width and height of the layer. These values are overridden if 
the content of the layer exceeds the specified size. 

For CSS layers, the default values for location and size are in pixels (px). You can 
also specify the following units: pc (picas), pt (points), in (inches), mm 
(millimeters), cm (centimeters), or % (percentage of the parent’s value). The 
abbreviations must follow the value without a space: for example, 3mm. The 
Overflow setting controls how CSS layers react when the content exceeds the 
layer’s size. 

Z-Index determines the z-index, or stacking order, of the layer. Higher-numbered 
layers appear above lower-numbered layers. Values can be positive or negative. It’s 
easier to change the stacking order of layers using the Layer palette than to enter 
specific z-index values. See “Changing the stacking order of layers” on page 248. 
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Netscape layers (those with the LAYER or ILAYER tag) can also be stacked relative to 
other layers on the page. When you select a Netscape layer, two additional options 
appear in the lower right corner of the Property inspector. Use the A/B option to 
select a relative stacking position and then choose the name of another layer from 
the pop-up menu directly to the right. (A specifies a layer above the current layer; 
B specifies a layer below the current layer.) 

Vis determines the initial display condition of the layer. Use a scripting language, 
such as JavaScript, to control the visibility property and dynamically display layer 
contents. Choose from the following options: 

• Default does not specify a visibility property, but most browsers interpret this 
as Inherit. 

• Inherit uses the visibility property of the layer’s parent. 

• Visible displays the layer contents, regardless of the parent’s value. 

• Hidden hides the layer contents, regardless of the parent’s value. Note that 
hidden layers created with LAYER and ILAYER still take up the same space as if 
they were visible. 

Bg Image specifies a background image for the layer. Click the folder icon to 
browse to and select an image file, or type the path for the image in the text field. 

Bg Color specifies a background color for the layer. Leave this option blank to 
specify a transparent background. 

Tag determines whether the layer is a CSS layer or a Netscape layer. SPAN and DIV 
create CSS layers; LAYER and ILAYER create Netscape layers. 

Overflow (CSS layers only) determines what happens if the contents of a layer 
exceed its size. Choose from the following options: 

• Visible increases the layer size so that all of the layer’s contents are visible. The 
layer expands downward and to the right. 

• Hidden maintains the layer’s size and clips any content that doesn’t fit. No 
scroll bars are provided. 

• Scroll adds scroll bars to the layer regardless of whether the contents exceed the 
layer’s size. Specifically providing scroll bars avoids confusion resulting from the 
appearance and disappearance of scroll bars in a dynamic environment. This 
option works only in browsers that support scroll bars. 

• Auto makes scroll bars appear only when the layer’s contents exceed 
its boundaries. 

Clip defines the visible area of a layer. Specify values that represent the distance in 
pixels from the layer’s boundaries. T (top) and L (left) settings are relative to the 
layer, not to the page. 
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Use Left, Top or PageX, PageY (Netscape layers only) lets you position a layer in 
relation to its parent. The Left, Top option places the layer in relation to the top 
left corner of its parent. The PageX, PageY option places the layer in an absolute 
location relative to the top left corner of the page, regardless of the position of the 
parent layer. 

Src (Netscape layers only) lets you display another HTML document within the 
layer. Click the folder icon to browse to and select the document, or type the path 
of the document. Note that Dreamweaver does not display this property in the 
Document window. 

A/B (Netscape layers only) specifies the layer above (A) or below (B) the current 
layer in the stacking order (z-index). Only layers previously defined in the 
document will appear in the list of layer names to the right of the A/B menu. 
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Setting properties for multiple layers 

When you select two or more layers, the Layer Property inspector displays text 
properties and a subset of the regular Layer properties, allowing you to modify 
several layers at once. To select multiple layers, press Shift while selecting layers. 
See “Manipulating layers” on page 243. 

L and T specify the position of the layers from the top left corner of the page or 
parent layer. 

W and H specify the width and height of the layers. These values are overridden if 
the content of the layers exceeds the specified size. 

For CSS layers, the default values for location and size are in pixels (px). You 
can also specify the following units: pc (picas), pt (points), in (inches), mm 
(millimeters), cm (centimeters), or % (percentage of the parent's value). The 
abbreviations must follow the value without a space: for example, 3mm. 

Vis determines the initial display condition of the layers. Use a scripting language, 
such as JavaScript, to control the visibility property and dynamically display layer 
contents. Choose from the following options: 

• Default does not specify a visibility property, but most browsers interpret this 
as Inherit. 

• Inherit uses the visibility property of the layer’s parent. 

• Visible displays the layer contents, regardless of the parent’s value. 

• Hidden displays the layer contents as transparent, regardless of the parent’s 
value. Note that hidden layers created with LAYER and ILAYER still take up the 
same space as if they were visible. 

Tag determines whether the layers are CSS layers or Netscape layers. SPAN and DIV 
create CSS layers; LAYER and ILAYER create Netscape layers. 

Bg Image specifies a background image for the layers. Click the folder icon to 
browse to and select an image file, or type the path for the image in the text field. 

Bg Color specifies a background color for the layers. Leave this option blank to 
specify a transparent background. 
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Manipulating layers 

As you work with your page layout, layers can be activated, selected, or resized. 
Activating layers lets you place content in them. Selecting layers lets you align, 
reposition, or resize them. Resizing layers lets you change the dimensions of a 
single layer or make two or more layers the same height and width. 

Different Property inspectors appear when you work with single or multiple 
layers. See “Setting Layer properties” on page 239 and “Setting properties for 
multiple layers” on page 242. When multiple layers are selected, the Modify menu 
displays the Layer and Hotspots options. 

To prevent layers from overlapping each other as you move and resize them, use 
the Prevent Overlap option. See “Preventing layer overlaps” on page 251. 


Activating layers 

Activate a layer so that objects can be placed in it. Activating a layer places the 
insertion point in the layer, highlights the layer’s border, and displays the selection 
handle, but it does not select the layer. 

To activate a layer: 

Click anywhere inside the layer. 


Using Layers 243 



Selecting layers 

Select one or more layers to align the layers, make them the same width and 
height, reposition them, and so on. For a complete list of options, see “Setting 
Layer properties” on page 239. 

To select a layer, do one of the following: 

• Click the layer marker in the Document window that represents the layer’s 
location in the HTML code. If the layer marker isn’t visible, choose View > 
Invisible Elements. 

• Click a layer’s selection handle. If the handle isn’t visible, click anywhere inside 
the layer to make it visible. 

a _._ 


• Click a layer’s border. 

• If no layers are active or selected, Shift-click inside a layer. 

• If multiple layers are selected, Control-Shift-click (Windows) or Command- 
Shift-click (Macintosh) inside a layer. This will deselect all other layers. 

• Click the name of the layer in the Layer palette. 

To select multiple layers, do one of the following: 

• Shift-click inside or on the border of two or more layers. 

• Shift-click two or more layer names in the Layer palette. 

When multiple layers are selected, the handles of the last selected layer are 
highlighted in black. The handles of the other layers are highlighted in white. 


244 Chapter 9 




Resizing layers 

Resize an individual layer or simultaneously resize multiple layers to make them 
the same width and height. 

If the Prevent Overlaps option is on, you will not be able to resize a layer so that it 
overlaps with another layer. See “Preventing layer overlaps” on page 251. 

To resize a layer, do one of the following: 

• To resize by dragging, select the layer and drag any of its resize handles. 

• To resize 1 pixel at a time, select the layer and press Control-arrow (Windows) 
or Option-arrow (Macintosh). 

• To resize by the grid snapping increment, press Shift-Control (Windows) or 
Option (Macintosh), while pressing an arrow key. For information about 
setting the grid snapping increment, see “Snapping layers to the grid” on 
page 247. 

• In the Property inspector, type a value for width and height. 

Resizing a layer changes the width and height of the layer. It does not define 
how much of the layer’s content is visible. To define the visible region within a 
layer, see “Setting Layer properties” on page 239. 

To resize multiple layers: 

1 In the Document window, select two or more layers. 

2 Do one of the following: 

• Choose Modify > Layers and Hotspots> Make Same Width or Modify > Layers 
and Hotspots > Make Same Height. 

The first selected layers will conform to the width or height of the last selected 
layer (highlighted in black). 

• In the Property inspector, under Multiple Layers, enter width and height 
values. The values are applied to all selected layers. 


Using Layers 245 



Moving layers 

Moving layers in the Document window will be familiar to anyone who has 

worked with basic graphics applications. 

If the Prevent Overlaps option is on, you will not be able to move a layer so that it 

overlaps another layer. See “Preventing layer overlaps” on page 251. 

To move one or more layers, do one of the following: 

• To move by dragging, select the layers and drag the selection handle of the last 
selected layer (highlighted in black). 

• To move 1 pixel at a time, select the layers and use the arrow keys. Use Shift 
and an arrow key to move the layer by the current grid snapping increment. For 
information about setting the grid snapping increment, see “Snapping layers to 
the grid” on page 247. 


Aligning layers 

Use the layer alignment commands to align one or more layers with a border of 
the last layer selected. 

When you align layers, child layers that aren’t selected may move because their 
parent layer is selected and moved. To prevent this, don’t use nested layers. 

To align two or more layers: 

1 Select the layers. 

2 Choose Modify > Layers and Hotspots, then select an alignment option. 

For example, if you select Align Top, all of the layers move so that their top 
borders are in the same vertical position as the top border of the last selected 
layer (highlighted in black). 
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Snapping layers to the grid 

Use the grid as a visual guide for positioning or resizing layers in the Document 

window. If snapping is enabled, layers are automatically positioned at the nearest 

snapping position when they are moved or resized. Snapping works regardless of 

whether the grid is visible. 

To display the grid, do one of the following: 

• Choose View > Grid > Show. 

• Choose View > Grid > Settings and select the Visible Grid option. 

To snap a layer: 

1 Choose View > Grid > Snap To to turn snapping on (or to toggle it off). 

2 Select the layer and drag it; as you drag it, the layer jumps to the nearest 
snapping position. When released, the layer jumps to the nearest 
snapping position. 

To change grid and snap settings: 

1 Choose View > Grid > Settings to open the dialog box. 

2 Select the desired options. 

• Visible Grid makes the grid visible. It works in tandem with the Show 
command (View > Grid > Show). 

• Spacing defines the distance between grid markers. Enter a number and then 
choose pixels, inches, or centimeters from the Units pop-up menu. The 
minimum unit is 25 pixels. 

• Color specifies the color of grid markers. The default color is light blue. 

• Display specifies whether the grid displays as lines or as dots. 

• Snapping turns snapping on and off. It works in tandem with the Snap To 
command (View > Grid > Snap To). 

• Snap Every specifies a snapping unit. Enter a number of units in the Snap 
Every box and choose pixels, inches, or centimeters from the Units pop-up 
menu. The default value is 5 pixels. 

To make layers snap to the Visible grid, the grid and snap pixel units must be 
the same. For example, if Spacing is set to 50 pixels, set Snap Every to 50 pixels. 

3 Click OK. 
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Changing the stacking order of layers 

Use the Property inspector or the Layer palette to change the stacking order 
of layers. The layer at the top of the Layer palette list is at the top of the 
stacking order. 

In HTML code, the stacking order, or z-index, determines the order in which 
layers are drawn in a browser. You can change the z-index for each layer using the 
Property inspector or using the Layer palette. 

To change the stacking order of layers using the Property inspector: 

1 Choose Window > Layers to open the Layer palette to see the current 
stacking order. 

2 Select a layer in the Layer palette or in the Document window. 

3 In the Layer Property inspector, type a number in the Z-index field. 

• Type a higher number to move the layer back in the stacking order 

• Type a lower number to move the layer forward in the stacking order 

To change the stacking order of layers in the Layer palette: 

Choose Window > Layers to open the Layer palette. Then in the Layer palette do 
one of the following: 

• In the Z column, click the number of the layer you are changing. Type a higher 
number than the existing number to move the layer back in the stacking order, 
or type a lower number to move the layer forward in the stacking order. 

• Select and drag a layer up or down to the desired stacking order. You’ll see a line 
appear as you move the layer. Release the mouse button when the placement 
line appears in the desired stacking order. 
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Changing layer visibility 

While working on your document, you can show and hide layers to see how the 
page will appear under different conditions. Use the Layer palette to change the 
visibility of layers. Use the Layer preferences panel to set the default visibility for 
new layers. See “Setting Layer preferences” on page 239. 

To change layer visibility: 

1 Choose Window > Layers to open the Layer palette. 

2 In the row of the layer you’re affecting, click in the eye-icon column until you 
set the desired visibility. 

• An open eye means the layer is visible. 

• A closed eye means the layer is invisible. 

• If there is no eye icon, the layer inherits visibility from its parent. (When layers 
are not nested, the parent is the document body, which is always visible.) 


To change the visibility of all layers at once: 

1 Choose Window > Layers to open the Layer palette. 

2 Click the header eye icon at the top of the column. 

About layers and tables 

Use layers to position content on a page. Layers are easier to work with and 
change the design of than table cells. You can use layers to quickly create complex 
page designs and then convert the layers to tables for use in 3.0 browsers, which 
don’t support the use of layers. You can also move back and forth between layers 
and tables to tweak layout and optimize page design. 

You can’t convert layers to tables or tables to layers in a template document or in a 
document to which a template has been applied. Create your original document, 
and convert it prior to saving it as a template. 

If you are targeting 4.0 and later browsers only, you can use a combination of 
tables and layers and even animate your layers. For information about animating 
layers, see “About timelines” on page 253. 

If you want to generate 3.0 browser-compatible files from your current file, use 
the Covert option in the File menu. See “Converting to 3.0 version compatibility” 
on page 252. 
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Using layers to design tables 

When designing tables, you may find it easier to design a page using layers then 
convert the layer layout to a table layout. 

To convert layers to a table: 

1 Choose Modify > Layout Mode > Convert Layers to Table. 

2 In the dialog box that appears, select the desired table layout options. 

• Most Accurate creates a table cell for every layer, plus any additional cells that 
are necessary to preserve the space between layers. 

• Smallest: Collapse Empty Cells specifies that the layers’ edges should be aligned 
if they are positioned within the specified number of pixels. If this option is 
selected, the resulting table will have fewer empty rows and columns. 

• Use Transparent GIFs fills the table’s last row with transparent GIFs. This 
ensures that the table is displayed the same in all browsers. 

When this option is on, it is impossible to edit the resulting table by dragging 
its columns. When it is off, the resulting table will not contain transparent 
GIFs, but its appearance may vary slightly in the different browsers. 

• Center on Page centers the resulting table on the page. 

If this option is off, the table is left aligned. 

3 Select the desired layout tools and grid options, and click OK. 

To convert a table to layers: 

1 Choose Modify > Layout Mode> Convert Tables To Layers. 

2 In the dialog box that appears, select the desired options. 

• Show Grid and Snap to Grid let you use a grid to help position layers. See 
“Snapping layers to the grid” on page 247. 

• Prevent Layer Overlaps constrains the positions of layers when they are created, 
moved, and resized so that they don’t overlap. See “Preventing layer overlaps” 
on page 251. 

• Show Layer palette displays the Layer palette. See “About the Layer palette” on 
page 237. 

3 Click OK. 

The tables are converted to layers within the file. Empty cells are not converted 
to layers. Content outside of tables is also placed in layers. 


250 Chapter 9 



Preventing layer overlaps 

Because table cells cannot overlap, Dreamweaver cannot create a table from 
overlapping layers. If you plan to convert the layers in a document to tables for 
compatibility with 3.0 browsers, use the Prevent Overlap option to constrain layer 
movement and positioning so that layers don’t overlap. 


To prevent layers from overlapping: 

Choose View > Prevent Layer Overlaps or select the Prevent Overlaps option in 
the Layer palette. 



When this option is on, a layer can’t be created in front of, moved or resized 
over, or nested within an existing layer. If you activate this option after creating 
overlapping layers, drag the overlapping layer to move it away from the 
other layer. 

When this option and snapping are enabled, a layer won’t snap to the grid if 
it would cause two layers to overlap. Instead, it will snap to the edge of the 
closest layer. 

Note: Certain actions do not prevent you from overlapping layers even when the Prevent 
Overlaps option is on. If you insert a layer from the menu, enter numbers in the Property 
inspector, or reposition layers by editing the HTML source code in the HTML inspector, you 
can cause layers to overlap or nest while the option is turned on. If this happens, drag 
overlapping layers in the Document window to separate them. 
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Converting to 3.0 version compatibility 

Use the Convert option in the File menu to create a 3.0 browser-compatible 
version of a page that uses layers, or to convert a document that uses tables to one 
that uses layers. In either conversion scenario, Dreamweaver creates a separate, 
converted document and preserves the original document. 

In general, you should convert a document only when you are completely satisfied 
with your original file—otherwise, you must convert the file each time you change 
the original file. 

Note: If you want to use layers to lay out a page for use with 3.0 browsers, use the Layout 
Mode commands in the Modify menu to convert the current page between table and layer 
layouts without creating a separate file. See "Using layers to design tables" on page 250. 


To convert a file for use with 3.0 browsers: 

1 Choose File > Convert >3.0 Browser Compatible. 

2 In the dialog box that appears, choose whether to convert layers to tables, CSS 
styles to HTML markup (character styles), or both. 

3 Click OK. 

Dreamweaver opens the converted file in a new, untitled window. All layers are 
replaced with a single table that preserves the original positioning. 

Note: Overlapping layers cannot be converted, nor can layers that are off the page to the 
left or top. 

CSS markup is replaced, where possible, with HTML character styles. Any 
CSS markup that cannot be converted to HTML is removed. See the “CSS to 
HTML markup conversion table” on page 196 for information on which styles 
are converted and which are removed. 

Timeline code that animates layers is removed. Timeline code that is unrelated 
to layers (for example, behaviors or changes to the image source) will execute 
over time as designed. The timeline is automatically rewound to frame 1. 


252 Chapter 9 



About timelines 


Dynamic HTML, or DHTML, refers to the ability to change style or 
positioning properties with a scripting language. Timelines use dynamic HTML 
to change the properties of layers and images in a series of frames over time. Use 
timelines to create animations that do not require any ActiveX controls, plugins, 
or Java applets. 

Timelines create animation by changing the position, size, visibility, and stacking 
order of a layer over time. Timelines are also useful for other actions that you want 
to occur after a page loads. For example, timelines can change the source file of an 
image, and they can execute behaviors at a particular time. The layer functions of 
timelines work only in 4.0 or later browsers. 

To see the JavaScript code generated by a timeline, open the HTML inspector. 
The timeline code is in the MMjnitTimelines function, inside a SCRIPT tag in the 
HEAD of the document. 

When editing the HTML of a document containing timelines, be careful not to 
move, rename, or delete anything that a timeline refers to. 


Using the Timeline inspector 

The Timeline inspector represents the properties of layers and images over time. 
Choose Window > Timelines to open the Timeline inspector. See also “About 
timelines” on page 253. 

Right-click (Windows) or Control-click (Macintosh) the Timeline inspector to 
open a context menu that includes all of the relevant commands. 

Playback head shows which frame of the timeline is currently displayed on 
the page. 


Timeline pop-up menu 
Playback head 
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Timeline pop-up menu specifies which of the document’s timelines are displayed in 
the Timeline inspector. 

Animation channels display bars for animating layers and images. 

Animation bars show the duration of each object. A single row can include 
multiple bars representing different objects. Different bars cannot control the 
same object in the same frame. 

Keyframes are frames in a bar where you have specified properties (such as 
position) for the object. Dreamweaver calculates intermediate values for frames in 
between keyframes. Small circles mark keyframes. 
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Behavior channel is the channel for behaviors that should be executed at a 
particular frame in the timeline. 



Behavior channel 


Frame numbers indicate the number of frames each bar occupies. The number 
between the Back and Play buttons is that of the current frame. You control the 
duration of animation by setting the total number of frames and the number of 
frames per second (fps). The default setting of 15 frames per second is a good 
average rate to use for most browsers running on common Windows and 
Macintosh systems. Faster rates may not improve performance. Browsers always 
play every frame of the animation, even if they cannot attain the specified frame 
rate on the user’s system. 
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Playback options 

Listed below are the playback options for viewing the animation. 

| |Timeline! 3 1 (3 f p s 1 r r 

Rewind moves the playback head to the first frame in the timeline. 

Back moves the playback head one frame to the left. Click Back and hold down 
the mouse button to play the timeline backward. 

Play moves the playback head one frame to the right. Click Play and hold down 
the mouse button to play the timeline continuously. 

Autoplay makes a timeline begin playing automatically when the current page 
loads in a browser. Autoplay attaches a behavior to the page’s BODY tag that 
executes the Play Timeline action when the page loads. 

Loop makes the current timeline loop indefinitely while the page is open in a 
browser. Loop inserts the Go to Timeline Frame behavior in the Behavior channel 
after the last frame of the animation. Double-click the marker in this frame to edit 
the parameters for this behavior and change the number of loops. 
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Creating a timeline animation 

Timelines create animation by changing the position, size, visibility, and stacking 
order of layers. Timelines can also change the source files of images. 

Timelines can move only layers. To make images or text move, create a layer using 
the Layer button on the Object palette and then insert images, text, or any other 
type of content in the layer. See “Creating layers” on page 236. 


To create a timeline animation: 

1 To animate a layer, move the layer to where it should be when the 
animation begins. 

2 Choose Window > Timelines. 

3 Select the layer you want to animate. 

Make sure you have selected the desired element. Click the layer marker or use 
the Layer palette to select a layer. See also “Manipulating layers” on page 243. 
When a layer is selected, handles appear around it as shown in the following 
illustration. 



File Edit View Insert Modify Text Commands Site Window Help 




Draw Layer 
button 


Selected layer 
with image 
inside 


Clicking inside the layer places a blinking insertion point inside the layer, but it 
does not select the layer. 

4 Choose Modify > Timeline > Add Object to Timeline or simply drag the 
selected object into the Timeline inspector. 

A bar appears in the first channel of the timeline. The name of the layer appears 
in the bar. 

If you are working with an image, the only property you can change is the 
image source file in the Property inspector. The remaining steps do not apply. 
See “Changing image and layer properties with timelines” on page 258. 

5 Click the keyframe marker at the end of the bar. 


Using Layers 255 








































6 Move the layer on the page to where it should be at the end of the animation. 

7 If you want the layer to move in a curve, select its animation bar and Control- 
click (Windows) or Command-click (Macintosh) to add a keyframe at the 
insertion point position, or click a frame in the middle of the animation bar 
and choose Add Keyframe from the context menu. 

Repeat this step to define additional keyframes. 

8 Hold down the Play button to preview the animation on the page. 

Repeat the procedure to add additional layers and images to the timeline and to 
create a more complex animation. 


Creating a timeline by dragging a path 

If you want to create an animation with a complex path, it may be more efficient 
to record the path as you drag the layer rather than creating individual keyframes. 

To create a timeline by dragging a path: 

1 Select a layer. 

2 Move the layer to where it should be when animation begins. 

Make sure you have selected the right element. Click the layer marker or use 
the Layer palette to select a layer. See also “Manipulating layers” on page 243. 

3 Choose Modify > Record Path of Layer. 

4 Drag the layer around the page to create a path. 

5 Release the mouse at the point where the animation should stop. 

Dreamweaver adds an animation bar to the timeline with the appropriate 
number of keyframes. 

6 In the Timeline inspector, click the Rewind button; then hold down the Play 
button to preview your animation. 
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Modifying timelines 

After defining a timeline’s basic components, you can make useful changes such as 

adding and removing frames, changing the start time of the animation, and so on. 

To modify a timeline, do any of the following: 

• To make the animation take longer, drag the end frame marker. All the 
keyframes in the animation shift so that their relative positions remain 
constant. To prevent the other keyframes from moving, press Control 
(Windows) or Command (Macintosh) while dragging the end frame marker. 

• To make the layer reach the keyframe position sooner or later, move the 
keyframe marker left or right in the bar. 

• To change the start time of an animation, select one or all of the bars associated 
with the animation (press Shift to select more than one bar at a time) and drag 
left or right. 

• To shift the location of an entire animation path, select the entire bar and 
then drag the object on the page. Dreamweaver adjusts the position of all 
keyframes. Making any type of change with an entire bar selected changes all 
the keyframes. 

• To add or remove frames in the Timeline, choose Modify > Timeline > Add 
Frame or Modify > Timeline > Remove Frame. 

• To make the timeline play automatically when the page opens in a browser, 
click Autoplay. Autoplay attaches a behavior to the page that executes the Play 
Timeline action when the page loads. 

• To make the timeline loop continuously, click Loop. Loop inserts the Go To 
Timeline Frame action in the Behavior channel after the last frame of the 
animation. You can edit the parameters for this behavior to define the 
number of loops. 
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Changing image and layer properties with timelines 

In addition to moving layers with timelines, you can change the source file of an 

image and the visibility, size, and stacking order of a layer. 

To change image and layer properties with a timeline: 

1 In the Timeline inspector, do one of the following: 

• Select an existing keyframe in the bar controlling the object you want to 
change. (The start and end frames are keyframes.) 

• To create a new keyframe, click a frame in the middle of the animation bar and 
choose Modify > Timeline > Add Keyframe, or Control-click (Windows) or 
Command-click (Macintosh) a frame in the animation bar. 

2 Define new properties for the object by choosing one of the following options: 

• To change the source file of an image, click the folder icon next to the Src field 
in the Property inspector to browse to and select a new image. 

• To change the visibility of a layer, choose inherit, visible, or hidden from the 
pop-up menu in the Vis field of the Property inspector. See also “Changing 
layer visibility” on page 249. 

• To change the size of a layer, drag the layer’s resize handles or enter new 
values in the Width and Height fields in the Property inspector. Internet 
Explorer 4.0 and 5.0 are currently the only browsers than can dynamically 
change the size of a layer. 

• To change the stacking order of a layer, enter a new value in the Z-Index field 
or use the Layer palette to change the stacking order of the current layer. See 
also “Changing the stacking order of layers” on page 248. 

3 Hold down the Play button to see the animation. 

The currently selected layer is always visible and at the top of the stacking order. 

Deselect all layers to allow the timeline to control the stacking order or visibility. 


258 Chapter 9 



Using multiple timelines 

Instead of trying to control all the action on a page with one timeline, it’s easier to 
work with separate timelines that control discrete parts of the page. For example, a 
page might also include interactive elements that trigger different timelines. 

To manage multiple timelines, use the following options: 

• To create a new timeline, choose Modify > Timeline > Add Timeline. 

• To remove a timeline, choose Modify > Timeline > Remove Timeline. 

• To rename a timeline, choose Modify > Timeline > Rename Timeline or enter a 
new name in the Timeline pop-up menu. 

• To view a different timeline in the Timeline inspector, choose a new timeline 
from the Timeline pop-up menu in the Timeline inspector. 
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Copying and pasting animations 

Once you have an animation sequence that you like, you can copy and paste it in 
another area of the current timeline, in another timeline in the same document, or 
in a timeline in another document. You can also copy and paste multiple 
sequences at one time. 

To cut or copy and paste animation sequences: 

1 Click an animation bar to select a sequence. To select multiple sequences, press 
Shift while clicking, or press Control-A (Windows) or Command-A 
(Macintosh) to select all sequences. 

2 Copy or cut the selection. 

3 Do one of the following: 

• Move the playback head to another spot in the current timeline. 

• Select another timeline from the Timeline pop-up menu. 

• Open another document or create a new one and then click in the 
Timeline inspector. 

4 Paste the selection into the timeline. 

Animation bars for the same object cannot overlap, because a layer cannot be in 
two places at one time (nor can an image have two different sources at one 
time). If the animation bar you are pasting would overlap another animation 
bar for the same object, Dreamweaver automatically shifts the selection to the 
first frame that doesn’t overlap. 

There two principles to keep in mind when pasting animation sequences into 
another document: 

• If you copy an animation sequence for a layer and the new document contains 
a layer with the same name, Dreamweaver applies the animation properties to 
the existing layer in the new document. 

• If you copy an animation sequence for a layer and the new document does not 
contain a layer with the same name, Dreamweaver pastes the layer and its 
contents from the original document along with the animation sequence. To 
apply the pasted animation sequence to another layer in the new document, 
choose Change Object from the context menu and select the name of the second 
layer from the pop-up menu. Delete the pasted layer if desired. See “Applying 
an animation sequence to a different object” on page 261. 
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Applying an animation sequence to a different object 

To save time, you can create an animation sequence once and apply it to the 
remaining layers in your document. 

To apply an existing animation sequence to other objects: 

1 In the Timeline inspector, select the animation sequence and copy it. 

2 Click any frame of the Timeline inspector and paste the sequence. 

3 Right-click (Windows) or Control-click (Macintosh) the pasted animation 
sequence and choose Change Object from the context menu. 

4 In the dialog box that appears, choose another object from the pop-up menu 
and click OK. 

5 Repeat steps 2 through 4 for any remaining objects that you want to follow the 
same animation sequence. 

You can also change your mind about which layer should be animated after 
creating an animation sequence; simply follow steps 3 and 4 above (no copying or 
pasting is necessary). 

Renaming timelines 


To rename the timeline displayed in the Timeline inspector, do one of the 
following: 

• Choose Modify > Timeline > Rename Timeline, and in the Rename Timeline 
dialog box enter a new name. 

• Enter a new name in the Timeline Name pop-up menu in the Timeline 
inspector. 

If your document contains the Play Timeline behavior action (for example, if it 
contains a button that the user must click to start the timeline), you must edit the 
behavior to reflect the new timeline name. 
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Animation tips for timelines 

The following suggestions can improve the performance of your animations and 

make creating animations easier: 

• Show and hide layers instead of changing the source file for multiple image 
animations. Switching the source file of an image can slow down the 
animation, because the new image must be downloaded. There will be no 
noticeable pauses or missing images if all images are downloaded at once in 
hidden layers before the animation runs. 

• Extend animation bars to create smoother motion. If animation looks 
choppy and images jump between positions, drag the end frame of the layer’s 
animation bar to extend the motion over more frames. Making the animation 
bar longer creates more data points between the start and end point of the 
movement and also makes the object move more slowly. Try increasing the 
number of frames per second (fps) to improve speed, but be aware that most 
browsers running on average systems cannot animate much faster than 15 fps. 
Test the animation on different systems with different browsers to find the 
best settings. 

• Don’t animate large bitmaps. Improve animation speed by not moving large 
images. Instead, create composites and move small parts of the image. For 
example, show a car moving by animating only the wheels. 

• Create simple animations. Do not create animations that demand more than 
current browsers can provide. Browsers always play every frame in a timeline 
animation, even when system or Internet performance decreases. 
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Behavior actions for controlling timelines 

Attach the behavior actions listed here to a link, button, or other object to control 
timelines. To create interesting effects, you can place behaviors containing these 
actions in the Behaviors channel. For example, you can make a timeline stop itself. 
For more information, see “Attaching a behavior to a timeline” on page 302 and 
“Using Behaviors” on page 297. 

Drag Layer lets the user drag a layer. Use this action to create puzzles, slider 
controls, and other moveable user interface elements. See “Drag Layer” on 
page 312. 

Show-Hide Layers shows, hides, or restores the default visibility of one or more 
layers. This action is useful for showing information as the user interacts with the 
page. See “Show-Hide Layers” on page 326. 

Play Timeline and Stop Timeline let users start and stop a timeline by clicking a link 
or button. These actions can also start and stop a timeline automatically when the 
user rolls over a link, image, or other object. See “Play Timeline and Stop 
Timeline” on page 330. 

Go To Timeline Frame causes the timeline to jump to a certain frame. The 
Loop checkbox in the Timeline inspector adds the Go To Timeline Frame 
action after the last frame of the animation, causing it to go to frame 1 and start the 
animation again. See “Go To Timeline Frame” on page 329 

Set Text of Layer replaces the content and formatting of an existing layer on a page 
with the content you specify. The content can include any valid HTML. See “Set 
Text of Layer” on page 323. 
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CHAPTER lO 

Using Frames 


Frames are made up of two major components—a frameset and individual frames. 
A frameset is an HTML page that defines the structure of a set of frames within a 
document. The frameset definition includes information about the number of 
frames displayed on a page, the size of the frames, the source of the page loaded 
into a frame, and other definable properties. A frameset HTML page isn’t 
displayed in a browser; it simply stores information about how the frames on a 
page will display. 

HTML frames are spatially defined regions or areas in an HTML page. Each 
frame in a page “holds” an individual HTML document. In a Web page, frames 
commonly define a navigation area and a content area for a page. 

When you split a Dreamweaver document into frames, you create separate 
HTML documents for the frameset and for each new frame. The frameset is 
referred to as a parent frame, and a frame is referred to as a child frame. 

You can create new content directly in a frame page, link existing pages to open in 
a frame, and set up a behavior to change content in multiple frames. 

What a user sees as a single Web page with two frames is actually three separate 
files: the frameset file and two files containing the content that appears inside 
the frames. 

Changing the properties of frames and framesets allows you to resize frames and 
to use links and targets to control a frame’s contents. 

When View > Frame Borders is off, the frameset appears exactly as it does in a 
browser. When frame borders are displayed, Dreamweaver adds space around the 
document for the border and widens small borders. This makes it easier for you to 
drag and select a frame. 
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Creating frames 

You create frames by modifying an existing Dreamweaver document, dividing it 
into additional document areas. There are several ways to create a frameset: you 
can design it yourself, or you can select from several predefined framesets. 


Creating a frameset 

Before creating a frameset or working with frames, make the frame borders visible 
in the document window. 

To view frame borders in a document, choose View > Frame Borders. 

When frame borders are displayed, space is added around the document border, 
providing you with a visual indicator of the frame areas in your document. 

To create a frameset, do one of the following: 

• Choose Modify > Frameset > Split Frame Left, Right, Up, or Down. 

• Alt-drag (Windows) or Option-drag (Macintosh) one of the frame borders into 
the Document window to split the document vertically or horizontally. Drag a 
frame border from one of the corners to divide the document into four frames. 



To delete a frame: 

Drag the frame border all of the way off the page or to the border of the 
parent frame. 
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Inserting a predefined frameset 

Predefined framesets make it easy for you to select the type of frameset you 
want to create. 

The predefined frameset icons in the Frames panel of the Objects palette provide a 
visual representation of each frameset as applied to a selected document. 
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The selected frameset surrounds the current document—the document in which 
the insertion point is located. The blue area of a predefined frameset icon 
represents the currently selected page or frame in a document, and the white area 
represents the new frame or frames. 


To insert a predefined frameset: 

1 Place the insertion point in the document the frameset will surround. 

2 Then do one of the following: 

• In the Frames panel on the Objects palette, select a predefined frameset. 
To insert the frameset, you can click an icon or drag an icon directly to 
the document. 

• To select a predefined frameset, choose Insert > Frames > Left, Right, Top, 
Bottom, Left_Top, Left Top, Top Left, Split. 
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Creating a nested frameset 

A frameset inside another frameset is called a nested frameset. Each new frameset 
you create includes its own frameset HTML document and frame documents. 

Use nested frames to set up multiple frames for a document. For example, a 
document with three frames might display a company’s logo in a frame at the top 
of the document, navigation controls in a frame on the left side of a document, 
and content in a third frame. 

To create a nested frameset: 

1 Place the insertion point in the frame where you want to insert a 
nested frameset. 

2 Do one of the following: 

• Choose Modify > Frameset > Split Frame Up, Down, Left, or Right. 

• In the Frames panel on the Objects palette, select a frameset icon. 

• Choose Insert > Frames > Left, Right, Top, Bottom, Left_Top, Left Top, Top 
Left, Split. 

• In the Document window, Alt-drag (Windows) or Option-drag (Macintosh) a 
frame border to split the frame vertically or horizontally. 
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Selecting a frame or frameset 

Frames and framesets are individual HTML documents. In order to make changes 
to a frame or to the frameset, begin by selecting the frame or frameset you wish to 
change. You can select a frame or frameset either in the Document window or by 
using the Frame inspector. 

When you select a frame or the frameset, selection lines appear both in the Frame 
inspector and in the Document window. 


Using the Frame inspector 

The Frame inspector provides a visual representation of the frames within a 
document. You can click a frame or frameset in the Frame inspector to select that 
frame or frameset in the document, and then you can view or edit the properties 
of the selected item in the Property inspector. See “About frame and frameset 
properties” on page 272. 

The Frame inspector shows the hierarchy of the frameset structure in a way that 
may not be apparent in the document window. In the Frame inspector, a thick 
three-dimensional border surrounds a frameset; frames are surrounded by a thin 
gray line, and each frame is identified by a frame name. 



To display the Frame inspector, do one of the following: 

• Choose Window > Frames. 

• Press Ctrl+FlO (Windows) or Command+FlO (Macintosh). 

To select a frame in the Frame inspector: 

Click the frame in the Frame inspector. 

To select a frameset in the Frame inspector: 

Click the border that surrounds the frames in the Frame inspector. 
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Selecting a frame or frameset in the Document window 

In the Document window, when a frame is selected, its borders are outlined with a 
dotted line; when a frameset is selected, all the borders of the frames within the 
frameset are outlined with a dotted line. 

Select frames and framesets to change their properties. The Property inspector 
displays the properties of the selected frame or frameset. See “About frame and 
frameset properties” on page 272. 

To select a frame in the document window: 

Alt-click (Windows) or Option-Shift-click (Macintosh) inside a frame. 

To select a frameset in the document window: 

Click a frame border in the Document window. 

To move the selection to another frame, do one of the following: 

• To move the selection to the next frame, 

Press Alt (Windows) or Command (Macintosh) plus the Left or Right 
Arrow key. 

• To move the selection to the parent frameset, 

Press Alt (Windows) or Command (Macintosh) plus the Up Arrow key. 

• To move the selection to the child frame, 

Press Alt (Windows) or Command (Macintosh) plus the Down Arrow key. 
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Saving frame and frameset files 

A frameset file and its associated frame files must be saved before you can preview 
the page in a browser. You can individually save a frameset page or a frame page, 
or you can save all open frame files and the frameset page. 

When you use Dreamweaver to create frame documents, each new frame 
document is given a temporary file name—for example, UntitledFrame_l for the 
frameset page, Untitled-1, Untitled-2, and so forth for the frame pages. 

When you select one of the save options, the Save File dialog box opens ready to 
save a document with its temporary file name. Because each file is “untitled,” it 
may be difficult for you to determine which frame file you are saving. Look at the 
frame selection lines in the Document window to identify the current document 
being saved. The selected area identifies the frame currently referenced in the Save 
File dialog box. 


Saving a frameset file 


To save a frameset file, choose one of the following options: 

• To save the frameset file, choose File > Save Frameset. 

• To save the frameset file as a new file, choose File > Save Frameset As. 


Saving a frame file 

To save a document that is inside a frame, click in the frame, then choose 
File > Save. 


Saving all files in a frameset 

To save all open documents, including individual documents, frame documents, 
and frameset documents, choose File > Save All. 

Note: Use the frame selection lines in the Document window to help you identify frameset 
and frame documents as you are saving files. 
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About frame and frameset properties 

Frames and framesets each have a Property inspector. 

• Frame properties determine the frame name, source file, margins, scrolling, 
resizing, and borders of individual frames within a frameset. 

• Frameset properties control the dimensions of the frames and the color and 
width of the borders between frames. 

To view frame properties: 

1 Choose Window > Properties to display the Property inspector if it isn’t 
already open. 

2 Do one of the following: 

• Alt-click (Windows) or Option-Shift-click (Macintosh) a frame. 

• Click a frame in the Frame inspector. 


Setting frame properties 

Use the frame Property inspector to name a frame and to set borders and margins. 
To see all of the following frame properties, click the expander arrow in the lower 
right corner of the Property inspector. 

To specify frame properties: 

1 Select a frame by doing one of the following: 

• Click a frame in the Frame inspector. 

• Alt-click (Windows) or Option-Shift-click (Macintosh) a frame in the 
Document window. 

2 Choose Window > Properties to open the Property inspector. Click the 
expander arrow in the lower right corner to see all properties. 
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3 To name the frame, type a name in the Frame Name field. 

Note Frame Name determines the name of the current frame to use for hyperlink target 
and scripting references. A frame name should be a single word. Underscores (_) are 
allowed, but hyphens (-), periods (.), and spaces are not. Frame names should start with a 
letter (as opposed to a numeral). Don't use JavaScript reserved words (such as top or 
navigator) for frame names. 

4 Choose from the following frame options: 

• Src determines the source document for the frame. Enter a file name or click 
the folder icon to browse to and select the file. You can also open a file in a 
frame by placing the pointer in the frame and choosing File > Open in Frame. 

• Scroll determines whether scroll bars appear when there is not enough room to 
display the content of the current frame. Most browsers default to Auto. 

• No Resize restricts the size of the current frame and prevents users from 
dragging the frame borders. You can always resize frames in the Document 
window; however, if this option is selected a user can’t resize frames in their 
browser. 

• Borders controls the border of the current frame. The options are Yes, No, and 
Default. This choice overrides border settings defined for the frameset. (See 
“Setting frameset properties” on page 274.) Most browsers default to Yes. A 
border can be turned off only when all adjacent frames are set to No (or set to 
Default with the parent frameset set to No). 

• Border Color sets a border color for all borders adjacent to the current frame. 
This setting overrides the border color of the frameset. 

5 Set the following margin options (if margin options aren’t visible, click the 
expander arrow in the lower right corner): 

Margin Width sets the width in pixels of the left and right margins (the space 
between the frame border and the content). 

Margin Height sets the height in pixels of the top and bottom margins (the 
space between the frame borders and the content). 
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Setting frameset properties 

Use frameset properties to set borders and frame size. Setting a frame property 
overrides the setting for that property in a frameset. For example, setting border 
properties in a frame overrides the border properties set in the frameset. 

Predefined framesets are used to quickly apply a frameset to a document. 
Predefined framesets share the following default property values: no borders, no 
scroll bars, and no resizing of frames when viewed in a browser. To change the 
default values, select the options you want in the Property inspector. 

To view frameset properties: 

1 Choose Window > Properties to display the Property inspector, if it isn’t 
already open. 

2 Do one of the following: 

• Click a border between two frames in the Document window. 

• Click the border that surrounds the frames in the Frame inspector. 

3 To see all the frameset properties, click the expander arrow in the lower right 
corner of the Property inspector. 
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To specify frameset properties: 

1 Select a frameset. 

2 In the Borders pop-up menu, select whether you want to display borders 
around frames when the document is viewed in a browser. 

• If you want to display borders, select Yes. 

• If you don’t want to display borders, select No. 

• If you want the user’s browser to determine how borders are displayed, 
select Default. 

3 In the Border Width field, type a number to specify the width of the borders in 
the current frameset. Type 0 to specify no border. 

4 In the Border Color field, type the hexadecimal value for a color, or use the 
color picker to select a color for the border. 

5 To select frame size options, click the tabs on the RowCol Selection box to 
select a row or the tabs on top to select a column. Then in the Value field, type 
a number to set the size of the selected row or column, and in the Units pop-up 
menu, set the unit of measure for the number in the Value field. 


Naming a frameset document 

Add a title to a frameset page using the page properties option. 

To name a frameset page: 

1 Select a frameset by doing one of the following: 

• Click the border of the frameset in the Frame inspector. 

• Alt-click (Windows) or Option-Shift-click (Macintosh) a frame in the 
Document window. You may have to press Alt (Windows) or Command 
(Macintosh) plus the Up Arrow key to select the frameset. 

2 Choose Modify > Page Properties. 

3 In the Title field, type a name for the document. 
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Specifying frame sizes 

Drag a frame border in the Document window to set approximate sizes for frames; 
then use the Property inspector to specify how much space the browser allocates to 
a frame when the screen size doesn’t allow the frames to display at full size. 


To specify frame sizes: 

1 Click a frame border to select the frameset. 

Choose View > Frame Borders if the borders aren’t visible. 

2 In the Property inspector, click the expander arrow to view all properties. 

3 In the RowCol Selection box, click the row or column you want to change. 
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4 To specify how space is allocated when the browser window is resized, enter a 
number in the Value field and choose from the following Units options: 

• Pixels sets the size of the selected column or row at an absolute value. This 
option is the best choice for a frame that should always be the same size, such as 
a navigation bar. If you set a different Units option for the other frames, they 
are allocated space only after frames specified in pixels are their full size. 

• Percent specifies that the current frame should take up a specified percentage of 
its frameset. Frames specified with units set to Percent are allocated space after 
frames with units set to Pixels, but before frames with units set to Relative. 

• Relative specifies that the current frame be allocated space proportionally to 
other frames. Frames with units set to Relative are allocated space after frames 
with units set to Pixels and Percent, but they take up all of the remaining space 
in the browser window. 
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Setting frame and frameset borders 

You can specify how frame and frameset borders appear in a document. 

When you specify border options for a frame, the corresponding frameset 

option is overridden. 

To set frame borders: 

1 Select the frame by Alt-clicking (Windows) or Option-Shift-clicking 
(Macintosh) or click the frame in the Frame inspector. 

2 Set the following options in the Property inspector: 

• Borders controls the border of the current frames. The options are Yes, No, 
and Default. Most browsers default to Yes. A border can be turned off only 
when all adjacent frames are set to No (or set to Default with the parent 
frameset set to No). 

• Border Color sets a border color for all borders adjacent to the current frame. 

To set frameset borders: 

1 Select the frameset by clicking a frame border in the Document window or 
clicking the border enclosing the frames in the Frame inspector. 

2 Set the following options in the Property inspector: 

• Borders controls the border of frames within the current frameset. Choose Yes 
to display borders in three-dimensional color, choose No to display borders as 
flat and gray, or choose Default to let the browser determine how borders are 
displayed. Most browsers default to Yes. 

• Border Color sets a color for all borders in the current frameset. This setting 
can be overridden for a single frame by a setting a border color for that frame. 

• Border Width specifies the width of the borders in the current frameset. Enter 
0 to specify no borders. 

Changing the background color of a frame 

You change the background color of a frame by setting the background color of 

the document in the frame. 

To change the background color of a document in a frame: 

1 Do one of the following: 

• Place the pointer in the frame and choose Modify > Page Properties. 

• Right-click (Windows) or Control-click (Macintosh) inside the frame and 
choose Page Properties from the context menu. 

2 Click the Background pop-up menu to select a color. 
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Controlling frame content with links 

Use the Target pop-up menu in the Property inspector to select a frame to open a 

file in. You can set a file to open in a new window, replace information in the same 

frame as the link, and replace information in another frame. 

You can cause content from a link to overwrite the current frame or to appear in 

an entirely new browser window. 

To target a frame: 

1 Select text or an object. 

2 In the Link field of the Property inspector, do one of the following: 

• Type the name of the file to link to. 

• Click the folder icon and select the file to link to. 

• Click and drag the Point to File icon to select the file to link to. 

To specify an anchor in the file to link to, enter a number sign (#) before the 
anchor name. See “Linking to a named anchor” on page 119. 

3 In the Target pop-up menu, choose a target for the linked document to 
display in. 

• blank opens the linked document in a new browser window and keeps the 
current window available. 

• parent opens the linked document in the parent frameset of the link. 

• self opens the link in the current frame, replacing the content in that frame. 

• top opens the link in the outermost frameset of the current document, 
replacing all frames. 

• If you named frames in the Property inspector, the frame names appear in 
this menu. Selecting a named frame opens the linked document in the 
selected frame. 
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Creating NOFRAMES content 

Dreamweaver lets you specify content to display in older and text-based browsers 
that do not support frames. Dreamweaver inserts the content you specify in the 
frameset document using a statement similar to the following: 

cnoframesxbody bgcolor="#FFFFFF"> 
this is the noframes content. 

</body> </noframes> 

When a browser that doesn’t support frames loads the frameset file, the browser 
displays only the NOFRAMES content. 

To define NOFRAMES content: 

1 Choose Modify > Frameset > Edit NoFrames Content. 

Dreamweaver clears the Document window, and the words “NoFrames 
Content” appear at the top of the body area. 

2 To create the NoFrames content, do one of the following: 

• In the Document window, type or insert the content. 

• Choose Window > HTML Source, and between the <noframes> tags, type the 
content or HTML code for the content. 

3 Choose Modify > Frameset > Edit NoFrames Content again to return to the 
normal view of the frameset document. 
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Using behaviors with frames 

You can apply a number of behaviors that take advantage of the way frames 
operate. Frames are usually used when the Web page designer wants to control the 
display of content on a Web page. There are several behaviors that facilitate 
changing the contents of a frame. 

• Set Text of Frame replaces the content and formatting of a frame with the 
content you specify. The content can include any valid HTML. Use this action 
to dynamically display information. See “Set Text of Frame” on page 322. 

• Go To URL opens a new page in the current window or in the specified frame. 
This action is particularly useful for changing the contents of two or more 
frames with one click. See “Go To URL” on page 316. 

• Insert Navigation Bar is used to direct a user to specific pages in a Web site. You 
can attach behaviors to navigation bar images and set which image displays 
based on a user’s actions. For example, you may want to show a button image 
in its up or down state to let a user know which page of a site is being viewed. 
See “Inserting a navigation bar” on page 125. 

Insert Jump Menu lets you set up a pop-up menu list of links that open files in a 
browser window when clicked. You can also target a particular window or frame 
in which the document will open. See “Inserting a jump menu” on page 123. 
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CHAPTER 11 

Inserting Media 


To insert a Java applet, Shockwave movie, Flash movie, ActiveX control, or other 
audio or video objects in a page, do one of the following: 

• Place the insertion point where you want the object to be, and then click the 
appropriate button on the Object palette. 

• Drag the appropriate button from the Object palette to where you want the 
object to appear in the Document window. 

• Place the insertion point and then choose the appropriate object from the 
Insert > Media submenu. 

In most cases, a dialog box appears allowing you to choose a source file and specify 
certain parameters for the media object. To prevent such dialog boxes from 
appearing, choose Edit > Preferences and deselect the Show Dialog When 
Inserting Objects option. 

Each Object palette button inserts the necessary HTML source code to make the 
object appear on the page. Use the Property inspector to specify the source file, 
dimensions, and other parameters. 
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Launching an external media editor 

You can double-click any file in the Site window to edit that file. If the file is an 
HTML file, it opens in Dreamweaver. If it’s another kind of file, such as an image 
file or Flash movie file, it opens in an appropriate external editor, such as 
Fireworks or Flash. 

Each file type is associated with one or more external editors. The editor that 
launches when you double-click the file in the Site window is called the 
primary editor. 

If more than one editor is associated with the file type, you can launch a secondary 
editor for a particular file: right-click (Windows) or Control-click (Macintosh) the 
file name in the Site window, and choose an editor from the Open With submenu 
of the context menu. 

Most of the time, the primary editor is the same application that would be 
launched if you double-clicked the file’s icon on the desktop. To explicitly specify 
which external editors should be launched for a given file type, choose Edit > 
Preferences and select External Editors from the Category list. File name 
extensions, such as .gif, .wav, and .mpg, are listed on the left under Extensions. 
Associated editors for a selected extension are listed on the right under Editors. 

To launch the primary editor for an image included in an HTML document, 
Control-double-click (Windows) or Command-double-click (Macintosh) the 
image in the Document window. Note that this method of launching an editor 
works only for images, not for other media embedded in a document. 

To add a file type to the list of extensions in External Editors preferences: 

1 Click the plus (+) button above the Extensions list. 

2 Enter a file name extension (including the period at the beginning of the 
extension), or several related extensions separated by spaces. 

To add an editor for a given file type: 

1 Select the file type extension in the Extensions list. 

2 Click the plus (+) button above the Editors list. 

3 In the dialog box that appears, choose an application to add to the Editors list. 

To remove a file type from the list: 

1 Select the file type in the Extensions list. 

Note: You can't undo after removing a file type from the list, so be sure you don't want 
the file type before you remove it. 

2 Click the minus (-) button above the Extensions list. 


282 Chapter 11 



To dissociate one editor from a file type: 

1 Select the file type in the Extensions list. 

2 Select the editor in the Editors list. 

3 Click the minus (-) button above the Editors list. 

To make an editor the primary editor for a file type: 

1 Select the file type. 

2 Select the editor (or add it if it isn’t on the list). 

3 Click the Make Primary button. 

Using Design Notes with media objects 

As with other objects in Dreamweaver, you can add Design Notes to a 
media object. 

To add Design Notes to a media object: 

1 Right-click (Windows) or Control-click (Macintosh) the object in the 
Document window. 

2 Choose Design Notes from the context menu. 

3 Enter your Design Notes. For details, see “About Design Notes” on page 172. 
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Inserting Shockwave movies 

Shockwave, the Macromedia standard for interactive multimedia on the Web, is a 
compressed format that allows media files created in Macromedia Director to be 
downloaded quickly and played by most popular browsers. 

The software that plays Shockwave movies is available as both a Netscape 
Navigator plugin and an ActiveX control. When you insert a Shockwave movie, 
Dreamweaver uses both the OBJECT tag (for the ActiveX control) and the EMBED 
tag (for the plugin) to get the best results in all browsers. When you make changes 
in the Property inspector for the movie, Dreamweaver maps your entries to the 
appropriate parameters for both the OBJECT and EMBED tags. 

For best cross-platform results, use Macromedia Aftershock to add HTML and 
JavaScript wrappers to Shockwave movies. Aftershock can add a variety of features 
to Shockwave movies, including the ability to detect which browser and plugin 
versions your visitors are using, and adapt accordingly. For more information on 
Aftershock, see “Inserting and editing Aftershock objects” on page 288. 

To insert a Shockwave movie: 

1 In the Document window, place the insertion point where you want to insert a 
Shockwave movie. 

2 Click the Shockwave button on the Object palette. 

3 In the dialog box that appears, select a movie file. 

4 In the Property inspector, enter the width and height of the movie in the W 
and H boxes. 

These are the only required properties. See “Shockwave properties” on 
page 285 for more information on the other properties. 
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Shockwave properties 

To ensure the best results in both Microsoft Internet Explorer and Netscape 
Navigator, Dreamweaver inserts Shockwave movies using both the OBJECT and 
EMBED tags. (OBJECT is the tag defined by Microsoft for ActiveX controls; EMBED is 
the tag defined by Netscape for plugins.) To view the properties in the Property 
inspector, select a Shockwave movie. 

The Property inspector initially displays the most commonly used properties. 
Click the expander arrow in the lower right corner to see all properties. 

Name specifies a name to identify the movie for scripting. Enter a name in the 
unlabeled field on the far left side of the Property inspector. 

W and H specify the width and height of the movie in pixels. You can also specify 
the following units; pc (picas), pt (points), in (inches), mm (millimeters), cm 
(centimeters), or % (percentage of the parent object’s value). The abbreviations 
must follow the value without a space: for example, 3mm. 

File specifies the path to the Shockwave movie file. Type a path, or click the folder 
icon to browse to a file. 

Tag determines the tags used to identify the Shockwave movie. You can choose 
OBJECT and EMBED or either tag separately. The default value, OBJECT and EMBED, 
is recommended. 

Align determines how the movie is aligned on the page. See “Aligning elements” 
on page 203 for a description of each option. 

BgColor specifies a background color for the movie area. This color also appears 
while the movie is not playing (while loading and after playing). 

ID defines the optional ActiveX ID parameter. This parameter is most often used 
to pass information between ActiveX controls. 

Borders specifies the width of the border around the movie. 

V Space and FI Space specify the number of pixels of white space above, below, and 
on both sides of the movie. 

Alt Image (OBJECT only) specifies an image to be displayed if the user’s browser 
does not support ActiveX controls. 

Parameters opens a dialog box in which to enter additional parameters to pass to 
the Shockwave movie. See “About parameters” on page 296. The Shockwave 
movie must be authored to receive these parameters. 
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Inserting Flash movies 

Macromedia's Flash technology is the premier solution for the delivery of vector- 
based graphics and animations. The Flash Player is available as both a Netscape 
Navigator plugin and an ActiveX control for Internet Explorer, and it is built in 
to the latest versions of Netscape Navigator, Microsoft Windows 98, and 
America Online. 

Use Macromedia Flash to create Flash movies. If you use Flash 3, use Aftershock 
to add scripting and plugin-version detection to your movie; see “Inserting and 
editing Aftershock objects” on page 288. If you use Flash 4, use the Publish 
command for the same purposes. 

When you insert a Flash movie into a document, Dreamweaver uses both the 
OBJECT tag (defined by Microsoft for ActiveX controls) and the EMBED tag (defined 
by Netscape) to get the best results in all browsers. When you make changes in the 
Property inspector for the movie, Dreamweaver maps your entries to the 
appropriate parameters for both the OBJECT and EMBED tags. 

Note: If you insert a movie using the Flash object, the movie can be viewed only with Flash 
Player 4, even if you used Flash 3 to create it. Flash Player 3 and earlier versions can't display 
movies inserted with the Flash object. Visitors to your page who use Flash Player 3 or earlier 
are prompted to upgrade to Flash Player 4. 


To insert a Flash movie: 

1 In the Document window, place the insertion point where you want to insert 
the movie. 

2 Click the Flash button in the Object palette. 

3 In the dialog box that appears, select a Flash movie file. 

4 In the Property inspector, enter the width and height of the movie in the W 
and H boxes. 

These are the only required properties. See “Flash movie properties” on 
page 287 for more information on the other properties. 
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Flash movie properties 

To ensure the best results in both Internet Explorer and Netscape Navigator, 
Dreamweaver inserts Flash movies using both the OBJECT and EMBED tags. (OBJECT 
is the tag defined by Microsoft for ActiveX controls; EMBED is the tag defined by 
Netscape for plugins.) To view the following properties in the Property inspector, 
select a Flash movie. 

The Property inspector initially displays the most commonly used properties. 
Click the expander arrow in the lower right corner to see all properties. 

Name specifies a name to identify the movie for scripting. Enter a name in the 
unlabeled field on the far left side of the Property inspector. 

W and H specify the width and height of the movie in pixels. You can also specify 
the following units; pc (picas), pt (points), in (inches), mm (millimeters), cm 
(centimeters), or % (percentage of the parent object’s value). The abbreviations 
must follow the value without a space: for example, 3mm. 

File specifies the path to the Flash movie file. Type a path, or click the folder icon 
to browse to a file. 

Tag determines the tags used to identify the movie. You can choose OBJECT 
and EMBED, or either tag separately. The default value, OBJECT and EMBED, 
is recommended. 

Align determines how the movie is aligned on the page. See “Aligning elements” 
on page 203 for a description of each option. 

BgColor specifies a background color for the movie area. This color also appears 
while the movie is not playing (while loading and after playing). 

ID defines the optional ActiveX ID parameter. This parameter is most often used 
to pass information between ActiveX controls. 

Borders specifies the width of the border around the movie. 

V Space and FI Space specify the number of pixels of white space above, below, and 
on both sides of the movie. 

Alt Image (OBJECT only) specifies an image to be displayed if the user’s browser 
does not support ActiveX controls. 

Parameters opens a dialog box for entering additional parameters to pass to the 
movie. See “About parameters” on page 296. The movie must be authored to 
receive these parameters. 

Quality sets the QUALITY parameter for the OBJECT and EMBED tags that run the 
movie. See the Flash documentation for a description of the options. The choices 
are Low, Auto Low, Auto High, and High. 
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Scale sets the SCALE parameter for the OBJECT and EMBED tags that run the movie. 
See the Flash documentation for a description of the options. 

Autoplay plays the movie automatically when the page loads. 

Loop makes the movie loop indefinitely. 


Inserting and editing Aftershock objects 

Aftershock is a Macromedia utility, included as part of the Director package. 
Aftershock generates HTML and JavaScript to be associated with Shockwave and 
Flash movies; it can be used, for instance, to detect what version of a plugin a 
visitor to your page is using, and provide appropriate content. You can open files 
created by Aftershock in Dreamweaver and then paste the contents into other 
Dreamweaver documents. To edit Aftershock objects, install Aftershock in your 
system, select HTML generated by Aftershock in a document, and then click 
Launch Aftershock in the Property inspector. 

In Flash 4, Aftershock has been superseded by the Publish capability. However, 
Aftershock is still useful for those using Flash 3 or Director. 

To insert Aftershock objects in Dreamweaver: 

1 In Dreamweaver, open an HTML file created by Aftershock. 

Aftershock elements appear as nonedi table objects in Dreamweaver. If an object 
includes a preview image, Dreamweaver displays it. 

2 Copy the contents of the file and paste them into another Dreamweaver 
document. 

To edit an Aftershock object: 

1 Select an Aftershock object and open the Property inspector. 

2 Click Launch Aftershock. 

3 Edit the file in Aftershock, save the changes, and exit from the utility. 

When you exit from Aftershock, Dreamweaver updates the content of the 
Aftershock object with the new information. 
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Inserting Generator objects 

Macromedia Generator provides a way to serve dynamic Web content. You can 
create Generator files with Flash 4, using free Generator authoring templates; the 
files are then served by a Web server running Generator server software. You can 
insert a Generator object into a Dreamweaver document. 


To insert a Generator object: 

1 In the Document window, place the insertion point where you want to insert 
the object. 

2 Click the Generator button in the Object palette. 

3 In the dialog box that appears, select a Generator template (.swt) file. 

4 If desired, click the plus (+) button to add a name=value parameter pair. Then 
enter a name for the parameter in the Name field, and a value for the parameter 
in the Value field. Repeat this step for each parameter. 

5 To remove a parameter, select it in the Parameters list and click the 
minus (-) button. 

6 When you finish entering parameters, click OK to insert the Generator object. 

To edit the parameters after the Generator object has been inserted, use the 

HTML Source inspector. 

The Generator server attempts to obtain values to plug into the template from a 

database file; if no database file is available, the server uses the name=value pairs 

that you supplied here while inserting the object. 


Inserting Netscape Navigator plugin content 

Plugins enhance Netscape Navigator, providing ways to view media content in a 
wide variety of formats. 

After you create content for a Navigator plugin, you can use Dreamweaver to 
insert that content into an HTML document. Dreamweaver uses the EMBED tag to 
mark the reference to the content file. 

To insert Navigator plugin content: 

1 In the Document window, place the insertion point where you want to insert 
the content. 

2 Click the Plugin button in the Object palette. 

3 In the dialog box that appears, select a content file for a Navigator plugin. 
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Netscape Navigator plugin properties 

After inserting content for a Netscape Navigator plugin, use the Property 
inspector to set parameters for that content. To view the following properties in 
the Property inspector, select a Netscape Navigator plugin object. 

The Property inspector initially displays the most commonly used properties. 
Click the expander arrow in the lower right corner to see all properties. 

Plugin specifies a name to identify the plugin for scripting. Enter a name in the 
unlabeled field on the far left side of the Property inspector. 

W and H specify, in pixels, the width and height allocated to the object on 
the page. You can also specify the following units: pc (picas), pt (points), in 
(inches), mm (millimeters), cm (centimeters), or % (percentage of the parent 
object’s value). The abbreviations must follow the value without a space: for 
example, 3mm. 

Src specifies the source data file. Enter a file name, or click the folder icon to 
browse to a file. 

Pig Url specifies the URL of the PLUGINSPAGE attribute. Enter the complete URL of 
the site where users can download the plugin. If the user viewing your page does 
not have the plugin, the browser tries to download it from this URL. 

Align determines how the object is aligned on the page. See “Aligning elements” 
on page 203 for a description of each option. 

V Space and H Space specify the amount of white space in pixels above, below, and 
on both sides of the plugin. 

Borders specifies the width of the border around the plugin. 

Parameters opens a dialog box for entering additional parameters to pass to the 
Netscape Navigator plugin. See “About parameters” on page 296. Many plugins 
respond to special parameters. The Flash plugin, for example, includes parameters 
for BGCOLOR, SALIGN, and SCALE. 
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Playing plugins in the Document window 

You can preview movies and animations that rely on Navigator plugins—that is, 
elements that use the EMBED tag—directly in the Document window. (It is not 
possible to preview movies or animations that rely on ActiveX controls in the 
Document window.) You can play all plugin elements at one time to see how the 
page will look to the user, or you can play each one individually to ensure that you 
have embedded the correct media element. 

To play movies, the proper plugins must be installed on your computer. When 
Dreamweaver starts up, it automatically searches for all installed plugins, looking 
first in the Configuration/Plugins folder and then in the plugin folders of all 
installed browsers. 

To play plugin content in the Document window: 

1 Insert one or more media elements by choosing Insert > Media > Shockwave, 
Insert > Media > Flash, or Insert > Media > Plugin. 

2 Play plugin content: 

• Select one of the media elements you have inserted and choose View > 

Plugins > Play. 

• Choose View > Plugins > Play All to play all of the media elements on the page 
that rely on plugins. 

To stop playing plugin content: 

Select a media element and choose View > Plugins > Stop, or choose View > 
Plugins > Stop All to stop all plugin content from playing. 


Troubleshooting Navigator plugins 

If you have followed the steps to play plugin content in the Document window, 

but some of the plugin content does not play, try the following: 

• Make sure the associated plugin is installed on your computer, and that the 
content is compatible with the version of the plugin you have. 

• Open the file Configuration/badplugins.cfg in a text editor and look to see if 
the plugin in question is listed. The badplugins.cfg file keeps track of plugins 
that cause Dreamweaver to fail or cause other serious problems. (If you 
experience problems with a particular plugin, consider adding it to this file.) 

• Check that you have enough memory (and on the Macintosh, check that 
enough memory is allocated to Dreamweaver). Some plugins require an 
additional 2 MB to 5 MB of memory to run. 
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Inserting an ActiveX control 

ActiveX controls (formerly known as OLE controls) are reusable components, 
somewhat like miniature applications, that can act like browser plugins. They run 
in Internet Explorer with Windows, but they don’t run on the Macintosh or in 
Netscape Navigator. The ActiveX object in Dreamweaver lets you supply 
attributes and parameters for an ActiveX control in your visitor’s browser. 

Dreamweaver uses the OBJECT tag to mark the place on the page where the ActiveX 
control will appear, and to provide parameters for the ActiveX control. 

To insert ActiveX control content: 

1 In the Document window, place the insertion point where you want to insert 
the content. 

2 Click the ActiveX button in the Object palette. 

An icon marks where the ActiveX control will appear on the page in 
Internet Explorer. 


ActiveX properties 

After inserting an ActiveX object, use the Property inspector to set attributes of 
the OBJECT tag and parameters for the ActiveX control. Click Parameters in the 
Property inspector to enter names and values for properties that don’t appear in 
the Property inspector. There is no widely accepted standard format for 
parameters for ActiveX controls; to find out which parameters to use, consult the 
documentation for the ActiveX control you’re using. 

The Property inspector initially displays the most commonly used properties. 
Click the expander arrow in the lower right corner to see all properties. 

Name specifies a name to identify the ActiveX object for scripting. Enter a name 
in the unlabeled field on the far left side of the Property inspector. 

W and H specify the width and height of the object in pixels. You can also specify 
the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm 
(centimeters), or % (percentage of the parent object’s value). The abbreviations 
must follow the value without a space: for example, 3mm. 

Class ID identifies the ActiveX control to the browser. Enter a value or choose one 
from the pop-up menu. When the page is loaded, the browser uses the class ID to 
locate the ActiveX control required for the ActiveX object associated with the 
page. If the browser doesn’t locate the specified ActiveX control, it attempts to 
download it from the location specified in Base. 
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Base specifies the URL containing the ActiveX control. Internet Explorer 
downloads the ActiveX control from this location if it has not been installed in the 
user’s system. If you don’t specify a Base parameter and if your visitor doesn’t 
already have the relevant ActiveX control installed, the browser can’t display the 
ActiveX object. 

Embed makes Dreamweaver add an EMBED tag within the OBJECT tag for the 
ActiveX control. If the ActiveX control has a Netscape Navigator plugin 
equivalent, the EMBED tag activates the plugin. Dreamweaver assigns the values 
you’ve entered as ActiveX properties to their Netscape Navigator plugin 
equivalents. 

Src defines the data file to be used for a Netscape Navigator plugin if the Embed 
option is turned on. If you don’t enter a value, Dreamweaver attempts to 
determine the value from the ActiveX properties entered already. 

Align determines how the object is aligned on the page. See “Aligning elements” 
on page 203 for a description of each option. 

Alt Img specifies an image to be displayed if the browser doesn’t support the OBJECT 
tag. This option is available only when the Embed option is deselected. 

V Space and H Space specify the amount of white space in pixels above, below, and 
on both sides of the object. 

Data specifies a data file for the ActiveX control to load. Many ActiveX controls, 
such as Shockwave and RealPlayer, do not use this parameter. 

ID defines the optional ActiveX ID parameter. This parameter is most often used 
to pass information between ActiveX controls. 

Borders specifies the width of the border around the object. 

Parameters opens a dialog box for entering additional parameters to pass to the 
ActiveX object. See “About parameters” on page 296. Many ActiveX controls 
respond to special parameters. 
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Inserting a Java applet 

Java is a programming language that allows the development of lightweight 
applications ( applets ) that can be embedded in Web pages. 

After you create a Java applet, you can insert that applet into an HTML document 
using Dreamweaver. Dreamweaver uses the APPLET tag to mark the reference to the 
applet file. 

To insert a Java applet: 

1 In the Document window, place the insertion point where you want to insert 
the applet. 

2 Click the Applet button in the Object palette. 

3 In the dialog box that appears, select a file containing a Java applet. 
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Java applet properties 

After inserting a Java applet, use the Property inspector to set parameters. To view 
the following properties in the Property inspector, select a Java applet. 

The Property inspector initially displays the most commonly used properties. 
Click the expander arrow in the lower right corner to see all properties. 

Name specifies a name to identify the applet for scripting. Enter a name in the 
unlabeled field on the far left side of the Property inspector. 

W and H specify the width and height of the applet in pixels. You can also specify 
the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm 
(centimeters), or % (percentage of the parent object’s value). The abbreviations 
must follow the value without a space: for example, 3mm. 

Code specifies the content file of the applet. Enter a file name, or click the folder 
icon to browse to a file. 

Base identifies the folder containing the selected applet. When you choose an 
applet, this field is filled automatically. 

Align determines how the object is aligned on the page. See “Aligning elements” 
on page 203 for a description of each option. 

Alt specifies alternative content (usually an image) to be displayed if the user’s 
browser doesn’t support Java applets or has Java disabled. If you enter text, 
Dreamweaver renders the text with the ALT attribute of the APPLET tag. If you 
choose an image, Dreamweaver inserts an IMG tag between the opening and 
closing APPLET tags. 

Note: To specify alternative content that is viewable in both Netscape Navigator (with Java 
disabled) and Lynx (a text-based browser), select an image and then manually add an ALT 
attribute to the IMG tag in the HTML Source inspector. 

V Space and H Space specify the amount of white space in pixels above, below, and 
on both sides of the applet. 

Parameters opens a dialog box for entering additional parameters to pass to the 
applet. See “About parameters” on page 296. Many applets respond to special 
parameters. 
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About parameters 

Use the Parameters dialog box to enter values for special parameters defined for 
Shockwave and Flash movies, ActiveX controls, Netscape Navigator plugins, and 
Java applets. See the documentation for the object you're using for information on 
the parameters it requires. 

Note: There is no widely accepted standard for identifying data files for ActiveX controls. 
Consult the documentation for the ActiveX control you're using to find out which 
parameters to use. 

To open the Parameters dialog box: 

1 Select an object that can have parameters (such as a Shockwave movie, an 
ActiveX control, a Navigator plugin, or a Java applet) in the Document 
window. 

2 Open the dialog box by using one of these methods: 

• Right-click (Windows) or Control-click (Macintosh) the object, and choose 
Parameters from the context menu. 

• Open the Property inspector if it isn’t already open, expand the Property 
inspector by clicking the expander arrow in the lower right corner, and click the 
Parameters button. 

To enter a value for a parameter in the Parameters dialog box: 

1 Click the plus (+) button. 

2 Enter the name of the parameter in the Parameter column. 

3 Enter the value of the parameter in the Value column. 

To remove parameters: 

Select a parameter and press Delete. 

To reorder parameters: 

Use the up and down arrow buttons. 


Using behaviors to control media 

You can add behaviors to your page to start and stop various media objects. 

Control Shockwave or Flash lets you play, stop, rewind, or go to a frame in a 
Shockwave or Flash movie. See “Control Shockwave or Flash” on page 311. 

Play Sound lets you play a sound. For example, you can play a sound effect 
whenever the user moves the mouse pointer over a link. See “Play Sound” on 
page 319. 
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Using Behaviors 


Behaviors allow the user’s interaction with the page to change the page, or to cause 
certain tasks to be performed. A behavior is a combination of an event and an 
action. For example, when the user moves the mouse over an image (an event), the 
image might highlight (an action). An action consists of prewritten JavaScript 
code that performs specific tasks, such as opening a browser window, playing a 
sound, or stopping a Shockwave movie. Events are defined by browsers for each 
page element; for example, onMouseOver, onMouseOut, and onClick are events 
associated with links in most browsers, whereas onLoad is an event associated with 
images and the document body. Events are generated by browsers in response to 
user actions; for example, when a visitor to your page moves the pointer over a 
link, the browser generates an onMouseOver event, and calls the JavaScript function 
(if any) that you’ve associated with that event. The events that you can use to 
trigger a given action vary from browser to browser. 

When attaching a behavior to a page element, you specify an action and the event 
that triggers it. Several actions can all be triggered by the same event, and you can 
specify the order in which the actions occur. 

Dreamweaver includes several behavior actions; additional actions can be found 
on the Dreamweaver Web site as well as on third-party developer sites. (See 
“Downloading and installing third-party behaviors” on page 304.) You can also 
write your own behavior actions if you are proficient in JavaScript. For more 
information on writing behavior actions, see Extending Dreamweaver. 
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Using the Behavior inspector 

Use the Behavior inspector to attach behaviors to objects and to modify 
parameters of previously attached behaviors. Behaviors are listed alphabetically by 
event. If there are several actions for the same event, the actions appear in the 
order in which they will execute. 

The selected tag appears at the top of the inspector. 

To open the Behavior inspector, choose Window > Behaviors or click the 
Behaviors button in the Launcher. 

Actions (+) displays a list of actions that can occur. Choosing an action causes a 
parameters dialog box to appear. 

Delete (-) removes a chosen action and associated event from the list in the 
Behavior inspector. 

Events For specifies the browsers in which the current behavior should work. The 
selection you make from this menu determines which events appear in the Events 
pop-up menu. 

Up and down arrow buttons move the selected action up or down in the behavior 
list. Actions are executed in the specified order. 

Events displays all the events that can trigger the action. Different events appear 
depending on the object selected. If the expected events don’t appear, make sure 
the correct object is selected. Use the tag selector at the bottom left of the 
Document window to select a tag. 

Note: The Events pop-up menu appears only after you have selected an action. 

Different browsers recognize different events for various objects. Choose the 
browsers in which you want the behavior to work from the Events For pop-up 
menu. Only the events recognized by the selected browsers appear on the Events 
pop-up menu. 
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About events 


The following list describes the events that can be linked to the actions listed in 
the Behavior inspector’s Actions (+) pop-up menu. When a visitor to your Web 
page interacts with the page—for example, by clicking an image—the browser 
generates events; those events can be used to call JavaScript functions that cause an 
action to occur. (Events can also be generated without user interaction, such as 
when you set a page to automatically reload every 10 seconds.) Dreamweaver 
supplies many common actions that you can trigger using these events. 

The list also specifies which browsers can generate each event. NS3 means 
Netscape Navigator 3.0; NS4 means Netscape Navigator 4.0; IE3 means Internet 
Explorer 3.0; IE4 means Internet Explorer 4.0. For information about 5.0 
browsers, see the Dreamweaver Support Center at http://www.macromedia.com/ 
support/dreamweaver/. For pointers to more information about events relating to 
data binding and marquees in Internet Explorer, see Microsoft’s Dynamic HTML 
reference page (listed in “HTML and Web technologies resources” on page 19). 

Note that most events don’t apply to all objects. For details on which events apply 
to which tags in each browser, see the files in your Dreamweaver/Configuration/ 
Behaviors/Events folder. 

onAbort (NS3, NS4, IE4) is generated when the user stops the browser from 
completely loading an image (for example, when the user clicks the browser’s Stop 
button while an image is loading). 

onAfterUpdate (IE4) is generated when a bound data element on the page has 
finished updating the data source. 

onBeforellpdate (IE4) is generated when a bound data element on the page has 
been changed and is about to lose focus (and is therefore about to update the 
data source). 

onBlur (NS3, NS4, IE3, IE4) is the opposite of onFocus. The onBlur event is 
generated when the specified element stops being the focus of user interaction. For 
example, when a user clicks outside a text field after clicking in the text field, the 
browser generates an onBlur event for the text field. 

onBounce (IE4) is generated when a marquee element’s contents have reached the 
boundary of the marquee. 

onChange (NS3, NS4, IE3, IE4) is generated when the user changes a value on 
the page, such as when the user chooses an item from a menu, or when the user 
changes the value of a text field and then clicks elsewhere on the page. 

onClick (NS3, NS4, IE3, IE4) is generated when the user clicks the specified 
element, such as a link, button, or image map. {Clicking is defined as pressing and 
then releasing the mouse button while pointing to the element.) 

onDbICIick (NS4, IE4) is generated when the user double-clicks the specified 
element. ( Double-clicking is defined as quickly pressing and releasing the mouse 
button while pointing to the element.) 
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onError (NS3, NS4, IE4) is generated when a browser error occurs while a page or 
image is loading. 

onFinish (IE4) is generated when the contents of a marquee element have 
completed a loop. 

onFocus (NS3, NS4, IE3, IE4) is generated when the specified element becomes 
the focus of user interaction. For example, clicking in a text field of a form 
generates an onFocus event. 

onFlelp (IE4) is generated when the user clicks the browser’s Help button or 
chooses Help from a browser menu. 

onKeyDown (NS4, IE4) is generated as soon as the user presses any key. (The user 
does not have to release the key for this event to be generated.) 

onKeyPress (NS4, IE4) is generated when the user presses and releases any key; 
this event is like a combination of the onKeyDown and onKeyllp events. 

onKeyUp (NS4, IE4) is generated when the user releases a key after pressing it. 

onLoad (NS3, NS4, IE3, IE4) is generated when an image or page 
finishes loading. 

onMouseDown (NS4, IE4) is generated when the user presses the mouse button. 
(The user does not have to release the mouse button to generate this event.) 

onMouseMove (IE3, IE4) is generated when the user moves the mouse while 
pointing to the specified element. (That is, the pointer stays within the boundaries 
of the element.) 

onMouseOut (NS3, NS4, IE4) is generated when the pointer moves off the 
specified element. (The specified element is usually a link.) 

onMouseOver (NS3, NS4, IE3, IE4) is generated when the mouse first moves to 
point to the specified element. (That is, when the pointer moves from not 
pointing to the element to pointing to the element.) The specified element for this 
event is usually a link. 

onMouseUp (NS4, IE4) is generated when a pressed mouse button is released. 

onMove (NS4) is generated when a window or frame moves. 

onReadyStateChange (IE4) is generated when the state of the specified element 
changes. Possible element states include uninitialized, loading, and complete. 

onReset (NS3, NS4, IE3, IE4) is generated when a form is reset to its 
default values. 

onResize (NS4, IE4) is generated when the user resizes the browser window or 
a frame. 

onRowEnter (IE4) is generated when the current record pointer of the bound data 
source has changed. 
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onRowExit (IE4) is generated when the current record pointer of the bound data 
source is about to change. 

onScroll (IE4) is generated when the user scrolls up or down. 

onSelect (NS3, NS4, IE3, IE4) is generated when the user selects text in a 
text field. 

onStart (IE4) is generated when a marquee element’s contents begin a loop. 
onSubmit (NS3, NS4, IE3, IE4) is generated when the user submits a form, 
onllnload (NS3, NS4, IE3, IE4) is generated when the user leaves the page. 


Attaching a behavior 

You can attach behaviors to the entire document (that is, to the BODY tag) or to 
links, images, form elements, or any of several other HTML elements. The 
browser determines which elements can accept behaviors. Internet Explorer 4.0, 
for example, has a much wider array of events for each element than Netscape 
Navigator 4.0 or any 3.0 browser. 

You can specify more than one action for each event. Actions occur in the order in 
which they’re listed in the Actions column of the Behavior inspector. For 
information on changing the order of actions, see “Changing a behavior” on 
page 303. 

To attach a behavior: 

1 Select an object. 

To attach a behavior to the entire page, click the <body> tag in the tag selector 
at the bottom left of the Document window. 

2 Choose Window > Behaviors to open the Behavior inspector, or click the 
Behaviors button on the Launcher. 

The HTML tag of the selected object appears in the title bar of the 
Behavior inspector. 

3 Click the plus (+) button and choose an action from the Actions pop-up menu. 

Actions that are dimmed in the menu can’t be chosen, because they won’t work 
in the current document. For example, the Play Timeline action is dimmed if 
the document has no timelines. If no events are available for the selected object, 
all actions are dimmed. 

A dialog box appears, displaying parameters and instructions for the action. 
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4 Enter parameters for the action, and click OK. 

All actions provided in Dreamweaver work in 4.0 and later browsers. Some 
actions do not work in older browsers. See “Using the behavior actions that 
ship with Dreamweaver” on page 304. 

5 The default event to trigger the action appears in the Events column. If this 
is not the trigger event you want, choose another event from the Events 
pop-up menu. 

Different events appear in the Events pop-up menu depending on the selected 
object and on the browsers specified in the Events For pop-up menu. Events 
may be dimmed if the relevant objects do not yet exist on the page or if the 
selected object cannot receive events. If the expected events don’t appear, make 
sure the correct object is selected, or change the target browsers in the Events 
For pop-up menu. 

If you’re attaching a behavior to an image, some events (such as onMouseOver) 
appear in parentheses. These events are available only for links. When you 
choose one of them, Dreamweaver wraps an A tag around the image to define a 
dummy link. The dummy link is represented by a number sign (#) in the 
Property inspector’s Link box. You can change the link value if you want to 
turn it into a real link to another page, but if you delete the number sign 
without replacing it with another link, you will remove the behavior. 


Attaching a behavior to a timeline 

Place behaviors in timelines to trigger them at a certain frame in the timeline. (For 
information on creating a timeline, see “About timelines” on page 253.) 

To place a behavior in a timeline: 

1 Double-click a frame in the Behaviors channel in the Timeline inspector. 

2 Use the Behavior inspector to define the behavior. 

Only one kind of event can trigger an action in a timeline: the animation reaching 
a certain frame number (an onFrame7 event, for example). 

The behavior can affect any object on the page, not just objects in the timeline. 
Preview the timeline in a browser to see the behavior working. You cannot preview 
behaviors in Dreamweaver. 
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Changing a behavior 

After attaching a behavior, you can change the event that triggers the action, add 
or remove actions, and change parameters for actions. 

To change a behavior: 

1 Select an object with a behavior attached. 

2 Choose Window > Behaviors to open the Behavior inspector. 

Behaviors appear in the inspector alphabetically by event. If there are 
several actions for the same event, the actions appear in the order in which they 
will execute. 

3 Choose from the following options: 

• To edit an action, double-click the behavior name, or select it and press Enter 
(Windows) or Return (Macintosh); then change parameters in the dialog box 
and click OK. 

• To change the order of actions for a given event, select the behavior and click 
the up or down arrow button. 

• To delete a behavior, select it and click the minus (-) button or press Delete. 


Creating new actions 

Actions are JavaScript elements. If you are proficient with JavaScript, you can 
write new actions and make them appear in the Actions pop-up menu in the 
Behavior inspector. For more information, see Extending Dreamweaver. 
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Downloading and installing 
third-party behaviors 

One of the most useful features of Dreamweaver is its extensibility—that is, it 
offers users who are proficient in JavaScript the opportunity to write their own 
objects, behaviors, commands, and property inspectors. Many of these users have 
chosen to share their development efforts with others by submitting files to the 
Dreamweaver Web site. To download these extensibility files, open the Behavior 
inspector and choose Get More Behaviors from the Actions (+) pop-up menu. 

To install a downloaded third-party behavior in your copy of Dreamweaver: 

1 Extract the behavior files from the downloaded archive with a file- 
decompression tool. 

For example, WinZip (Windows) or Ziplt (Macintosh) can open the zip 
archives that are available at the Online Resource Center. 

2 Drag the extracted files to the Configuration/Behaviors/Actions folder in the 
Dreamweaver application folder. 

3 Relaunch Dreamweaver. 

Using the behavior actions that ship 
with Dreamweaver 

The behavior actions included with Dreamweaver have been written to work in all 
4.0 browsers and in Internet Explorer 5. (Netscape Navigator 5 has not yet been 
released at the time of this writing.) However, some actions do not work in older 
browsers. Refer to the following table for details on how actions work in specific 
pre-4.0 browsers. For an explanation of what each action does and how to choose 
options for it, see the topics following the table. 



Macintosh 


Windows 


Action 

Netscape 
Navigator 3.0 

Internet Explorer 

3.Ox 

Netscape 
Navigator 3.0 

Internet Explorer 
3.01 

Call JavaScript 

OK 

Fails without error 

OK 

OK 

Change Property 

OK 

Fails without error 

OK 

OK 

Check Browser 

OK 

Fails without error 

OK 

OK 

Check Plugin 

OK 

Fails without error 

OK 

OK 

Control Shockwave 
or Flash 

OK 

Fails without error 

OK 

Fails without error 

Drag Layer 

Fails without error 

Fails without error 

Fails without error 

Fails without error 
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Macintosh 


Windows 


Action 

Netscape 
Navigator 3.0 

Internet Explorer 

3.Ox 

Netscape 
Navigator 3.0 

Internet Explorer 
3.01 

Go To URL 

OK 

Fails without error 

OK 

OK 

Jump Menu 

OK 

Fails without error 

OK 

Fails without error 

Jump Menu Go 

OK 

Fails without error 

OK 

Fails without error 

Open Browser 
Window 

OK 

Fails without error 

OK 

OK 

Play Sound 

OK 

Fails without error 

OK 

Fails without error 

Popup Message 

OK 

Fails without error 

OK 

OK 

Preload Images 

OK 

Fails without error 

OK 

Fails without error 

Set Nav Bar Image 

OK 

Fails without error 

OK 

Fails without error 

Set Text of Frame 

OK 

Fails without error 

OK 

OK 

Set Text of Layer 

Fails without error 

Fails without error 

Fails without error 

Fails without error 

Set Text of Status Bar 

OK 

Fails without error 

OK 

OK 

Set Text of Text Field 

OK 

Fails without error 

OK 

OK 

Show-Flide Layers 

Fails without error 

Fails without error 

Fails without error 

Fails without error 

Swap Image 

OK 

Fails without error 

OK 

Fails without error 

Swap Image Restore 

OK 

Fails without error 

OK 

Fails without error 

Go To Timeline 

Frame 

Play Timeline and 

Stop Timeline 

Image source 
animation and 
invoking behaviors 
works, but layer 
animation fails 
without error 

Fails without error 

Image source 
animation and 
invoking behaviors 
works, but layer 
animation fails 
without error 

Fails without error 

Validate Form 

OK 

Fails without error 

OK 

OK 
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Call JavaScript 

The Call JavaScript action lets you use the Behavior inspector to specify that 
a custom function or line of JavaScript code should be executed when an 
event occurs. 

To use the Call JavaScript action: 

1 Select an object and open the Behavior inspector. 

2 Click the plus (+) button and choose Call JavaScript from the Actions pop-up 
menu. 

3 Type the exact JavaScript to be executed, or type the name of a function. 

For example, to create a Back button, you might type 

if (history.length > 0){history.back()}. If you have encapsulated your code in a 

function, type only the function name (for example, goBackO). 

4 Click OK. 

5 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you want 
are not listed, change the target browser in the Events For pop-up menu. 
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Change Property 

Use the Change Property action to change the value of one of an object’s 
properties (for example, the background color of a layer or the action of a form). 
The properties you can affect are determined by the browser; many more 
properties can be changed by this behavior in Microsoft Internet Explorer (IE) 4.0 
than in IE 3.0 or Netscape Navigator 3.0 or 4.0. For example, you can set the 
background color of a layer dynamically. 

Note: Use this action only if you are very familiar with HTML and JavaScript. 


To use the Change Property action: 

1 Select an object and open the Behavior inspector. 

2 Click the plus (+) button and choose Change Property from the Actions 
pop-up menu. 

3 From the Type of Object pop-up menu, choose the type of object whose 
property you want to change. 

The Named Object pop-up menu now lists all the named objects of the type 
you chose. 

4 Choose an object from the Named Object pop-up menu. 

5 Choose a property from the Property pop-up menu, or enter the name of the 
property in the text field. 

To see the properties that can be changed in each browser, choose different 
browsers from the browser pop-up menu. If you are typing a property name, be 
sure to use the exact JavaScript name of the property (and remember that 
JavaScript properties are case-sensitive). 

6 Enter the new value for the property in the New Value field, and click OK. 

7 Check that the default event is the one you want. (When the event occurs, the 
action will execute and the property will change.) 

If it isn’t, choose another event from the pop-up menu. If the events you want 
are not listed, change the target browser in the Events For pop-up menu. 
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Check Browser 


Use the Check Browser action to send visitors to different pages depending on 
their browser brands and versions. For example, you might want users to go to one 
page if they have Netscape Navigator 4.0 or later, to go to another page if they 
have Microsoft Internet Explorer 4.0 or later, and to stay on the current page if 
they have any other kind of browser. 

It’s useful to attach this behavior to the BODY tag of a page that is compatible with 
practically any browser (and that does not use any other JavaScript); this way, 
visitors who come to the page with JavaScript turned off will still see something. 

Another option is to attach this behavior to a null link (A tag) and have the action 
determine the link’s destination based on the visitor’s browser brand and version. 


To use the Check Browser action: 

1 Select an object and open the Behavior inspector. 

2 Click the plus (+) button and choose Check Browser from the Actions 
pop-up menu. 

3 Determine how you want to separate your visitors: by browser brand, by 
browser version, or both. 

For example, do you want everyone with a 4.0 browser to see one page, and all 
others to see a different page? Or perhaps you want Netscape Navigator users to 
see one page and Microsoft Internet Explorer (IE) users to see another. 

4 Specify a version of Netscape Navigator. 

5 In the adjacent pop-up menus, choose options for what to do if the browser is 
the version you specified or later and what to do otherwise. 

The options are Go to URL, Go to Alt URL, and Stay on This Page. 

6 Specify a version of Microsoft Internet Explorer. 

7 In the adjacent pop-up menus, choose options for what to do if the browser is 
the version you specified or later and what to do otherwise. 

The options are Go to URL, Go to Alt URL, and Stay on This Page. 

8 Choose an option from the Other Browsers pop-up menu to specify what to do 
if the browser is neither Netscape Navigator nor Microsoft Internet Explorer. 

Stay on This Page is the best option for browsers other than Navigator and IE 
because most do not support JavaScript—and if they cannot read this behavior, 
they will stay on the page anyway. 

9 Enter the paths and file names of the URL and the alternate URL in the text 
fields at the bottom of the dialog box. If you enter a remote URL, you must 
enter the http:// prefix in addition to the www address. 
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10 Click OK. 

11 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you 
want are not listed, change the target browser in the Events For pop-up 
menu. Remember that the purpose of this behavior is to check for 
different browser versions, so it’s best to choose an event that works on 3.0 and 
later browsers. 

Check Plugin 

Use the Check Plugin action to send visitors to different pages depending on 
whether they have the specified plugin installed. For example, you might want 
users to go to one page if they have Shockwave and another page if they do not. 

Note: You cannot detect specific plugins in Microsoft Internet Explorer (IE) using JavaScript. 
However, selecting Flash or Director will add the appropriate VBScript code to your page to 
detect those plugins in IE on Windows. 

To use the Check Plugin action: 

1 Select an object and open the Behavior inspector. 

2 Click the plus (+) button and choose Check Plugin from the Actions 
pop-up menu. 

3 Choose a plugin from the Plugin pop-up menu, or click Enter and type the 
exact name of the plugin in the adjacent field. 

You must use the exact name of the plugin as specified in bold on the About 
Plug-ins page in Netscape Navigator. (In Windows, choose Navigator’s Help > 
About Plug-ins command; on the Macintosh, choose About Plug-ins from the 
Apple menu.) 

4 In the If Found, Go To URL field, specify a URL for users who have 
the plugin. 

If you specify a remote URL, you must include the http:// prefix in the address. 
To make users with the plugin stay on the same page, leave this field blank. 

5 In the Otherwise, Go To URL field, specify an alternative URL for users who 
don’t have the plugin. 

To make users without the plugin stay on the same page, leave this field blank. 


Using Behaviors 309 



6 Plugin detection is not possible in Internet Explorer on the Macintosh, and 
most plugins cannot be detected in Internet Explorer on Windows. By default, 
when detection is impossible, the user is sent to the URL listed in the 
Otherwise field. To instead send the user to the first (If Found) URL, select the 
Always go to first URL if detection is not possible option. When selected, this 
option effectively means “assume that the user has the plugin, unless the 
browser explicitly indicates that the plugin is not present.” 

In general, if the plugin content is integral to your page, select the Always go to 
first URL if detection is not possible option; users without the plugin will often 
be prompted by the browser to download the plugin. If the plugin content is 
not essential to your page, leave this option unselected. 

This option applies only to Internet Explorer; Netscape Navigator can always 
detect plugins. 

7 Click OK. 

8 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you want 
are not listed, change the target browser in the Events For pop-up menu. 
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Control Shockwave or Flash 

Use the Control Shockwave or Flash action to play, stop, rewind, or go to a frame 
in a Shockwave or Flash movie. 

To use the Control Shockwave or Flash action: 

1 Choose Insert > Media > Shockwave or Insert > Media > Flash to insert a 
Shockwave or Flash movie, respectively. 

2 Choose Window > Properties and enter a name for the movie in the leftmost 
text field. You must name the movie to attach the Control Shockwave or 
Flash action. 

3 With the movie still selected in the Document window, open the Behavior 
inspector. 

4 Click the plus (+) button and choose Control Shockwave or Flash from the 
Actions pop-up menu. 

5 Choose a movie from the Shockwave Object pop-up menu. 

Dreamweaver automatically lists all files ending in .dcr, .dir, .swf, or .spl that 
are in OBJECT or EMBED tags in the current document. 

6 Choose to play, stop, rewind, or go to a frame in the movie. The Play option 
plays the movie from the current frame. 

7 Click OK. 

8 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you want 
are not listed, change the target browser in the Events For pop-up menu. 
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Drag Layer 

The Drag Layer action lets the user drag a layer. Use this action to create puzzles, 
slider controls, and other movable interface elements. 

You can specify in which direction the user can drag the layer (horizontally, 
vertically, or in any direction), a target to which the user should drag the layer, 
whether to snap the layer to the target if the layer is within a certain number of 
pixels of the target, what to do when the layer hits the target, and more. 

Because the Drag Layer action must be called before the layer can be dragged by 
the user, make sure the event that triggers the action occurs before the user 
attempts to drag the layer. It’s best to attach Drag Layer to the BODY object (with 
the on Load event), though you can also attach it to a link that fills the entire layer 
(such as a link around an image) using the onMouseOver event. 


To use the Drag Layer action: 

1 Choose Insert > Layer or click the Layer button on the Object palette and draw 
a layer in the Document window. 

2 Deselect the layer by clicking elsewhere in the Document window. 

3 Open the Behavior inspector. 

4 Click the plus (+) button and choose Drag Layer from the Actions 
pop-up menu. 

If Drag Layer is unavailable, you probably have a layer selected. Because layers 
do not accept events in both 4.0 browsers, you must select a different object— 
such as the BODY tag or a link (A tag)—or change the target browser to IE 4.0 in 
the Events For pop-up menu. 

5 In the Layer pop-up menu, select the layer that you want to make draggable. 

6 Choose either Constrained or Unconstrained from the Movement 
pop-up menu. 

Unconstrained movement is appropriate for puzzles and other drag-and-drop 
games. For slider controls and moveable scenery such as file drawers, curtains, 
and mini-blinds, choose constrained movement. 

7 For constrained movement, enter values (in pixels) in the Up, Down, Left, and 
Right fields. 

Values are relative to the starting position of the layer. To constrain movement 
within a rectangular region, enter positive values in all four fields. To allow only 
vertical movement, enter positive values for Up and Down and 0 for Left and 
Right. To allow only horizontal movement, enter positive values for Left and 
Right and 0 for Up and Down. 
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8 Enter values (in pixels) for the drop target in the Left and Top fields. 

The drop target is the spot to which you want the user to drag the layer. A layer 
is considered to have reached the drop target when its left and top coordinates 
match the values you enter in the Left and Top fields. Values are relative to the 
top left corner of the browser window. Click Get Current Position to 
automatically fill the fields with the current position of the layer. 

9 Enter a value (in pixels) in the Snap if Within field to determine how close the 
user must get to the drop target before the layer snaps to the target. 

Larger values make it easier for the user to find the drop target. 

10 For simple puzzles and scenery manipulation, you can stop here. To define 
the drag handle for the layer, track the movement of the layer while it is 
being dragged, and trigger an action when the layer is dropped, click the 
Advanced tab. 

11 To specify that the user must click a particular area of the layer to drag the layer, 
choose Area Within Layer from the Drag Handle pop-up menu; then enter the 
left and top coordinates and the width and height of the drag handle. 

This option is useful when the image inside the layer has an element that 
suggests dragging, such as a title bar or drawer handle. Do not set this option if 
you want the user to be able to click anywhere in the layer to drag it. 

12 Choose any While Dragging options that you want to use; 

• Select Bring Layer to Front if the layer should move to the front of the stacking 
order while it is being dragged. If you select this option, use the pop-up menu 
to choose whether to leave the layer in front or restore it to its original position 
in the stacking order. 

• Enter JavaScript code or a function name (for example, monitorLayerO) in the 
Call JavaScript field to repeatedly execute the code or function while the layer is 
being dragged. For example, you might want to write a function that monitors 
the coordinates of the layer and displays hints such as “you’re getting warmer” 
or “you’re nowhere near the drop target” in a text field. See “Gathering 
information about the draggable layer” on page 314. 

13 Enter JavaScript code or a function name (for example, evaluateLayerPosO) in the 
second Call JavaScript field to execute the code or function when the layer is 
dropped. Select Only if Snapped if the JavaScript should be executed only if the 
layer has reached the drop target. 

14 Click OK. 

15 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you want 
are not listed, change the target browser in the Events For pop-up menu. 
Remember that layers are not supported by 3.0 browsers. 

Note: You cannot attach the Drag Layer action to an object with the onMouseDown or 

onClick events. 
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Gathering information about the draggable layer 

When you attach the Drag Layer action to an object, Dreamweaver inserts the 
MM dragLayerO function into the HEAD section of your document. In addition to 
registering the layer as draggable, this function defines three properties for each 
draggable layer —MM_LEFTRIGHT, MM_UPDOWN, and MM__SNAPPED— that you can 
use in your own JavaScript functions to determine the current horizontal position 
of the layer, the current vertical position of the layer, and whether the layer has 
reached the drop target. 

For example, the following function displays the value of the MM_UPDOWN 
property (the current vertical position of the layer) in a form field called 
curPosField. (Form fields are useful for displaying continuously updated 
information because they are dynamic—that is, you can change their contents 
after the page has finished loading—in both Netscape Navigator and Microsoft 
Internet Explorer.) 

function getPos(layername){ 
var layerRef = MM_findObj(layername); 
var curVertPos = layerRef.MM_UPDOWN; 
document.tracking.curPosField.value = curVertPos; 

} 

Instead of displaying the value of MM_UPDOWN or MM LEFTRIGHT in a form field, 
you could write a function that displays a message in the form field depending on 
how close the value is to the drop zone, or you could call another function to show 
or hide a layer depending on the value. How you react to the value of 
MM_UPDOWN or MM_LEFTRIGHT is limited only by your imagination and your 
JavaScript skills. 

It is especially useful to read the MM SNAPPED property when you have several 
layers on the page, all of which must reach their targets before the user can 
advance to the next page or task. For example, you could write a function to count 
how many layers have an MM_SNAPPED value of true and call it whenever a layer is 
dropped. When the snapped count reaches the desired number, you could send 
the user to the next page or display a message of congratulations. 

If you have used the onMouseOver event to attach the Drag Layer action to links 
within several layers, you must make a minor change to the MM dragLayerO 
function to prevent the MM_SNAPPED property of a snapped layer from being reset 
to false if the mouse pointer rolls over the layer. (This can happen if you have used 
Drag Layer to create a picture puzzle, because the user is likely to roll the mouse 
pointer over snapped pieces while positioning others.) MM_dragLayer() does not 
prevent this behavior, because it is sometimes desirable—for example, if you want 
to set multiple drop targets for a single layer. 
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To prevent re-registration of snapped layers: 

1 Choose Edit > Find. 

2 Choose HTML Source from the Find What pop-up menu. 

3 Type (IcurDrag) in the adjacent text field. 

4 Click Find Next. 

If Dreamweaver asks if you want to continue searching from the beginning of 
the document, click Yes. Dreamweaver finds a statement that reads: 

if (IcurDrag) return false; 

5 Close the Find dialog box and then modify the statement in the HTML 
inspector so that it reads: 

if (IcurDrag | | curDrag.MM SNAPPED != null) return false; 

The two pipes (11) mean “or,” and curDrag is a variable that represents the layer 
that is being registered as draggable. In English the statement means “If curDrag 
is not an object, or if it already has an MM_SNAPPED value, don’t bother 
executing the rest of the function.” 
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Go To URL 


The Go To URL action opens a new page in the current window or in the 
specified frame. This action is particularly useful for changing the contents of two 
or more frames with one click. It can also be called into a Timeline to jump to a 
new page after a specified time interval. 

To use the Go To URL action: 

1 Select an object and open the Behavior inspector. 

2 Click the plus (+) button and choose Go To URL from the Actions 
pop-up menu. 

3 Choose a destination for the URL from the Open In list. 

The Open In list automatically lists the names of all frames in the current 
frameset as well as the main window. If there are no frames, the main window is 
the only option. 

Note: This action may produce unexpected results if any frame is named top, blank, self, 
or parent. Browsers sometimes mistake these names for reserved target names. 

4 Click Browse to select a document to open, or enter the path and file name of 
the document in the URL field. 

5 Repeat steps 3 and 4 to open additional documents in other frames. 

6 Click OK. 

7 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you want are 
not listed, change the target browser in the Events For pop-up menu. 


Jump Menu 

When you create a jump menu using Insert > Form Object > Jump Menu, 
Dreamweaver creates a menu object and attaches the appropriate behavior to it. 
There is usually no need to attach the Jump Menu action to an object by hand. 
Instead, double-click an existing Jump Menu action in the Behavior inspector to 
edit a jump menu, to change the location in which the linked file opens, or to add 
or change a menu selection prompt. For information about creating a jump 
menu, see “Inserting a jump menu” on page 123. 

To edit a jump menu using the Behavior inspector: 

1 Create a jump menu object if there isn’t one already in your document. 

2 Select the jump menu object and open the Behavior inspector. 

3 Double-click Jump Menu in the Actions column. 

4 In the Jump Menu dialog box, edit the menu items; then click OK. 
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Jump Menu Go 

The Jump Menu Go action lets you associate a Go button with a jump menu. 
(Before you use this action, a jump menu must already exist in the document.) 
Clicking the Go button opens the link that’s selected in the jump menu. A jump 
menu doesn’t normally need a Go button; choosing an item from a jump menu 
generally causes a URL to load without any need for further user action. But if the 
user chooses the same item that’s already chosen in the jump menu, the jump 
doesn’t occur. The Go button is useful in circumstances when it’s obvious to your 
visitors that re-choosing the current choice in the jump menu doesn’t cause the 
jump to occur. In particular, add a Go button to a jump menu when the jump 
menu appears in a frame, and jump menu items link to pages in other frames that 
provide additional links. 

To use the Jump Menu Go action: 

1 Select an object to use as the Go button (generally a button image), and open 
the Behavior inspector. 

2 Click the plus (+) button and choose Jump Menu Go from the Actions 
pop-up menu. 

3 In the Choose Jump Menu pop-up menu, choose a menu for the Go button 
to activate. 

4 Click OK. 

Open Browser Window 

Use the Open Browser Window action to open a URL in a new window. You can 
specify the properties of the new window, including its size, attributes (whether it 
is resizable, has a menu bar, and so on), and name. 

If you specify no attributes for the window, it opens at the size and with the 
attributes of the window that launched it. Specifying any attributes for the 
window automatically turns off all other attributes that are not explicitly turned 
on. For example, if you set no attributes for the window, it might open at 640 x 
480 pixels and have a navigation bar, location toolbar, status bar, and menu bar. If 
you explicitly set the width to 640 and the height to 480 and set no other 
attributes, the window opens at 640 x 480 pixels and has no navigation bar, no 
location toolbar, no status bar, no menu bar, no resize handles, and no scroll bars. 
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To use the Open Browser Window action: 

1 Select an object and open the Behavior inspector. 

2 Click the plus (+) button and choose Open Browser Window from the Actions 
pop-up menu. 

3 Click Browse to select a file, or enter the URL you want to display. 

4 Set any of the following options: 

Window Width specifies the width of the window in pixels. 

Window Height specifies the height of the window in pixels. 

Navigation Toolbar is the row of browser buttons that includes Back, Forward, 
Home, and Reload. 

Location Toolbar is the row of browser options that includes the location field. 

Status Bar is the area at the bottom of the browser window in which messages 
(such as the load time remaining and the URLs associated with links) appear. 

Menu Bar is the area of the browser window (Windows) or the desktop 
(Macintosh) where menus such as File, Edit, View, Go, and Help appear. You 
should explicitly set this option if you want users to be able to navigate from 
the new window. If you do not set this option, the user can only close or 
minimize the window (Windows) or close the window or quit the application 
(Macintosh) from the new window. 

Scrollbars as Needed specifies that scroll bars should appear if the content 
extends beyond the visible area. If you do not explicitly set this option, scroll 
bars do not appear. If the Resize Handles option is also turned off, users have 
no way of seeing content that extends beyond the original size of the window. 

Resize Handles specifies that the user should be able to resize the window, either 
by dragging the lower right corner of the window or by clicking the maximize 
button (Windows) or size box (Macintosh) in the upper right corner. If this 
option is not explicitly set, the resize controls are unavailable and the lower 
right corner is not draggable. 

Window Name is the name of the new window. You should name the new 
window if you want to target it with links or control it with JavaScript. 

5 Click OK. 

6 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you want 
are not listed, change the target browser in the Events For pop-up menu. 
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Play Sound 

Use the Play Sound action to play a sound. For example, you might want to play a 
sound effect whenever the mouse pointer rolls over a link, or you might want to 
play a music clip when the page loads. 

Note: Browsers may require some kind of audio support (such as an audio plugin) to 
play sounds. 


To use the Play Sound action: 

1 Select an object and open the Behavior inspector. 

2 Click the plus (+) button and choose Play Sound from the Actions 
pop-up menu. 

3 Click Browse to select a sound file, or enter the path and file name in the Play 
Sound field. 

4 Click OK. 

5 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you want 
are not listed, change the target browser in the Events For pop-up menu. 


Popup Message 

The Popup Message action displays a JavaScript alert with the message you 
specify. Because JavaScript alerts have only one button (OK), use this action to 
provide information rather than to present the user with a choice. 

You can embed any valid JavaScript function call, property, global variable, or 
other expression in the text. To embed a JavaScript expression, place it inside 
braces ({}). To display a brace, precede it with a backslash (\{). 

Example The URL for this page is {window.location}, and today is {new Date()}. 

To use the Popup Message action: 

1 Select an object and open the Behavior inspector. 

2 Click the plus (+) button and choose Popup Message from the Actions 
pop-up menu. 

3 Enter your message in the Message field. 

4 Click OK. 

5 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you want 
are not listed, change the target browser in the Events For pop-up menu. 
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Preload Images 

The Preload Images action loads images that do not appear on the page right away 
(such as those that will be swapped in with timelines, behaviors, or JavaScript) 
into the browser cache. This prevents delays caused by downloading when it is 
time for the images to appear. 

Note: The Swap Image action automatically preloads all highlight images when you check 
the Preload Images option in the Swap Image dialog box, so you do not need to manually 
add Preload Images when using Swap Image. 

To use the Preload Images action: 

1 Select an object and open the Behavior inspector. 

2 Click the plus (+) button and choose Preload Images from the Actions 
pop-up menu. 

3 Click Browse to select an image file to preload, or enter the path and file name 
of an image in the Image Source File field. 

4 Click the plus (+) button at the top of the dialog box to add the image to the 
Preload Images list. 

Note If you do not click the plus button before entering the next image, the image you 
have just chosen will be replaced in the list with the image you choose next. 

5 Repeat steps 3 and 4 for all remaining images that you want to preload on the 
current page. 

6 To remove an image from the Preload Images list, select the image in the list 
and click the minus (-) button. 

7 Click OK. 

8 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you want 
are not listed, change the target browser in the Events For pop-up menu. 
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Set Nav Bar Image 

Use the Set Nav Bar Image action to turn an image into a navigation bar image, or 
to change the display and actions of images in a navigation bar. (For more 
information, see “Inserting a navigation bar” on page 125.) 

Use the Basic tab of the Set Nav Bar Image dialog box to create or update a 
navigation bar image or set of images, to change which URL is displayed when a 
navigation-bar button is clicked, and to select a different window in which to 
display a URL. 

Use the Advanced tab of the Set Nav Bar Image dialog box to change the state of 
other images in a document based on the current button’s state. By default, 
clicking an element in a navigation bar automatically causes all other elements in 
the navigation bar to return to their Up states; use the Advanced tab if you want 
to set a different state for an image when the selected image is in its Down or 
Over state. 

To edit a Set Nav Bar Image action: 

1 Select an image in the navigation bar to edit, and open the Behavior inspector. 

2 In the Behavior inspector, in the Actions column, double-click the Set Nav Bar 
Image action associated with the event you’re altering. 

3 In the Basic tab of the Set Nav Bar Image dialog box, select image edit options. 

To set multiple images for a navigation bar button: 

1 Select an image in the navigation bar to edit, and open the Behavior inspector. 

2 In the Behavior inspector, in the Actions column, double-click the Set Nav Bar 
Image action associated with the event you’re altering. 

3 Click the Advanced tab of the Set Nav Bar Image dialog box. 

4 In the When Element Is Displaying pop-up menu, choose an image state. 

• Choose Down Image if you want to change the display of another image after a 
user has clicked the selected image. 

• Choose Over Image or Over While Down Image if you want to change the 
display of another image when the pointer is over the selected image. 

5 In the Also Set Image list, select another image on the page to set. 

6 Click Browse to select the image file to display, or type the path of the image 
file in the To Image File field. 

7 If you selected Over Image or Over While Down Image in step 4, you have an 
additional option. In the If Down, To Image File text field, click Browse to 
select the image file, or type the path to the image file to display. 


Using Behaviors 321 



Set Text of Frame 


The Set Text of Frame action allows you to dynamically set the text of a frame, 
replacing the content and formatting of a frame with the content you specify. The 
content can include any valid HTML. Use this action to dynamically display 
information. 

Although the Set Text of Frame action replaces the formatting of a frame, you 
can select Preserve Background Color to preserve the page background and text 
color attributes. 

You can embed any valid JavaScript function call, property, global variable, or 
other expression in the text. To embed a JavaScript expression, place it inside 
braces ({}). To display a brace, precede it with a backslash (\{). 

Example The URL for this page is {window.location}, and today is {new Date()}. 

To create a frameset: 

Choose Modify > Frameset > Split Frame Left, Right, Up, or Down. 

For more information, see “Creating frames” on page 266. 

To use the Set Text of Frame action: 

1 Select an object and open the Behavior inspector. 

2 Click the plus (+) button and choose Set Text > Set Text of Frame from the 
Actions pop-up menu. 

3 In the Set Text of Frame dialog box, choose the target frame from the 
Frame pop-up menu. 

4 Click the Get Current HTML button to copy the current frame’s HTML 
content and formatting. 

5 Enter a message in the New HTML field, then click OK. 

6 Check that the default event is the one you want. If it isn’t, choose another 
event from the pop-up menu. 

If you don’t see the events you want, change the target browser in the Events 
For pop-up menu. 
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Set Text of Layer 

The Set Text of Layer action replaces the content and formatting of an existing 
layer on a page with the content you specify. The content can include any valid 
HTML source code. 

Set Text of Layer replaces the content and formatting of the layer, but retains layer 
attributes, including color. Format the content by including HTML tags in the 
New HTML field of the Set Text of Layer dialog box. 

You can embed any valid JavaScript function call, property, global variable, or 
other expression in the text. To embed a JavaScript expression, place it inside 
braces ({}). To display a brace, precede it with a backslash (\{). 

Example The URL for this page is {window.location}, and today is {new Date()}. 

To create a layer: 

1 Choose Insert > Layer. 

For more information, see “Creating layers” on page 236. 

2 In the Property inspector, type a name for the layer. 

To attach a Set Text of Layer action: 

1 Select an object and open the Behavior inspector. 

2 Click the plus (+) button and choose Set Text > Set Text of Layer from the 
Actions pop-up menu. 

3 In the Set Text of Layer dialog box, use the Layer pop-up menu to choose the 
target layer. 

4 Enter a message in the New HTML field, then click OK. 

5 Check that the default event is the one you want. If it isn’t, choose another 
event from the pop-up menu. 

If you don’t see the events you want, change the target browser in the Events 
For pop-up menu. 
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Set Text of Status Bar 


The Set Text of Status Bar action shows a message in the status bar at the bottom 
left of the browser window. For example, you can use this action to describe the 
destination of a link in the status bar instead of showing the URL associated with 
it. To see an example of a status message, roll your mouse over any of the 
navigation buttons in Dreamweaver Help. 

You can embed any valid JavaScript function call, property, global variable, or 
other expression in the text. To embed a JavaScript expression, place it inside 
braces ({}). To display a brace, precede it with a backslash (\{). 

Example The URL for this page is {window.location}, and today is {new Date()}. 

To use the Set Text of Status Bar action: 

1 Select an object and open the Behavior inspector. 

2 Click the plus (+) button and choose Set Text > Set Text of Status Bar from the 
Actions pop-up menu. 

3 In the Set Text of Status Bar dialog box, type your message in the Message field. 

Keep the message concise. The browser truncates the message if it doesn’t fit in 
the status bar. 

4 Click OK. 

5 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you want 
are not listed, change the target browser in the Events For pop-up menu. 
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Set Text of Text Field 

The Set Text of Text Field action replaces the content of a form’s text field with the 
content you specify. 

You can embed any valid JavaScript function call, property, global variable, or 
other expression in the text. To embed a JavaScript expression, place it inside 
braces ({}). To display a brace, precede it with a backslash (\{). 

Example The URL for this page is {window.location}, and today is {new Date()}. 

To create a named text field: 

1 Choose Insert > Form Object > Text Field. 

For more information, see “Creating Forms” on page 377. 

2 In the Property inspector, type a name for the text field. Make sure the name is 
unique on the page (don’t use the same name for multiple elements on the same 
page, even if they’re in different forms). 

To use the Set Text of Text Field action: 

1 Select a text field and open the Behavior inspector. 

2 Click the plus (+) button and choose Set Text > Set Text of Text Field from the 
Actions pop-up menu. 

3 In the Set Text of Text Field dialog box, choose the target text field from the 
Text Field pop-up menu. 

4 Enter text in the New Text field, then click OK. 

5 Check that the default event is the one you want. If it isn’t, choose another 
event from the pop-up menu. 

If you don’t see the events you want, change the target browser in the Events 
For pop-up menu. 
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Show-Hide Layers 

The Show-Hide Layers action shows, hides, or restores the default visibility of one 
or more layers. This action is useful for showing information as the user interacts 
with the page. For example, as the user rolls the mouse pointer over an image of a 
plant, you could show a layer that gives details about the plant’s growing season 
and region, how much sun it needs, how large it can grow, and so on. 

Show-Hide Layers is also useful for creating a preload layer—that is, a large layer 
that obscures the contents of the page at first and then disappears when all the 
page components have finished loading. 


To use the Show-Hide Layers action: 

1 Choose Insert > Layer or click the Layer button on the Object palette, and 
draw a layer in the Document window. 

Repeat this step to create additional layers. 

2 Click in the Document window to deselect the layer, then open the 
Behavior inspector. 

3 Click the plus (+) button and choose Show-Hide Layers from the Actions 
pop-up menu. 

If Show-Hide Layers is unavailable, you probably have a layer selected. Because 
layers do not accept events in both 4.0 browsers, you must select a different 
object—such as the BODY tag or a link (A tag)—or change the target browser to 
IE 4.0 in the Events For pop-up menu. 

4 From the Named Layers list, select the layer whose visibility you want 
to change. 

5 Click Show to show the layer, Hide to hide the layer, or Default to restore the 
layer’s default visibility. 

6 Repeat steps 4 and 5 for all remaining layers whose visibility you want to 
change at this time. 

7 Click OK. 

8 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you want 
are not listed, change the target browser in the Events For pop-up menu. 

When viewed in a Netscape Navigator browser window, layers may shrink to fit 
the content. To keep this from happening, add text or images to layers, or set layer 
clip values. 
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To create a preload layer: 

1 Click the Layer button on the Object palette and draw a large layer in the 
Document window. 

Be sure the layer covers all the content on the page. 

2 In the Layer palette, drag the layer name to the top of the list of layers to specify 
that the layer should be at the front of the stacking order. 

3 Name the layer loading in the leftmost text field in the Property inspector. 

4 With the layer still selected, set the background color of the layer to the same 
color as the page background in the Property inspector. 



5 Click inside the layer (which should now be obscuring the rest of the page 
contents) and type a message, if desired. 

For example, “Please wait while the page loads” or “Loading...” are messages 
that tell users what is happening so that they know the page contains content. 

6 Click the <body> tag in the tag selector in the bottom left corner of the 
Document window. 

7 In the Behavior inspector, choose Show-Hide Layers from the Actions 
pop-up menu. 

8 Select the layer called loading from the Named Layers list. 

9 Click Hide. 

10 Click OK. 
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Swap Image 

The Swap Image action swaps one image for another by changing the SRC 
attribute of the IMG tag. Use this action to create button rollovers and other image 
effects (including swapping more than one image at a time). 

Note: Because only the SRC attribute is affected by this action, you should swap in an image 
that has the same dimensions (height and width) as the original in order to avoid distortion. 


To use the Swap Image action: 

1 Choose Insert > Image or click the Image button on the Object palette to insert 
an image. 

2 In the Property inspector, enter a name for the image in the leftmost text field. 

The Swap Image action still works if you do not name your images; it names 
unnamed images automatically when you attach the behavior to an object. 
However, it is easier to distinguish images in the Swap Image dialog box if all of 
the images are named beforehand. 

3 Repeat steps 1 and 2 to insert additional images. 

4 Select an object (generally the image you’re going to swap) and open the 
Behavior inspector. 

5 Click the plus (+) button and choose Swap Image from the Actions 
pop-up menu. 

6 From the Images list, select the image whose source you want to change. 

7 Click Browse to select the new image file, or enter the path and file name of the 
new image in the Set Source To field. 

8 Repeat steps 6 and 7 for any additional images you want to change. 

9 Select the Preload Images option to load the new images into the 
browser’s cache when the page is loaded. 

This prevents delays caused by downloading when it is time for the images 
to appear. 

10 Click OK. 

11 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you want 
are not listed, change the target browser in the Events For pop-up menu. 
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Swap Image Restore 

The Swap Image Restore action restores the last set of swapped images to their 
previous source files. This action is automatically added whenever you attach the 
Swap Image action to an object; if you left the Restore option selected while 
attaching Swap Image, you should never need to select the Swap Image Restore 
action manually. 


Go To Timeline Frame 

The Go To Timeline Frame action moves the playback head to the specified 
frame. You can use this action in the Behavior channel of the Timeline inspector 
to make portions of the timeline loop a specific number of times, to create a 
Rewind link or button, or to let the user jump to different parts of the animation. 

To use the Go To Timeline Frame action: 

1 Choose Window > Timeline to open the Timeline inspector, and make sure 
that your document contains a timeline. 

If you don’t see any purple animation bars in the Timeline inspector, your 
document does not contain a timeline. See “Creating a timeline animation” on 
page 255. 

2 Select an object. 

To attach the behavior to a frame in the timeline, click in the Behavior channel 
at the desired frame. 

3 Open the Behavior inspector. 

4 Click the plus (+) button and choose Timeline > Go To Timeline Frame from 
the Actions pop-up menu. 

5 Choose a timeline from the Timeline pop-up menu. 

6 Enter a frame number in the Go to Frame field. 

7 If you are adding this action in the Behavior channel of a timeline and want a 
portion of the timeline to loop, enter the number of times the segment should 
loop in the Loop field. 

You must leave this field blank if you are not attaching Go To Timeline Frame 
to a frame in a timeline. 

8 Click OK. 

9 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you want 
are not listed, change the target browser in the Events For pop-up menu. 
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Play Timeline and Stop Timeline 

Use the Play Timeline and Stop Timeline actions to let users start and stop a 
timeline by clicking a link or button, or to start and stop a timeline automatically 
when the user rolls over a link, image, or other object. The Play Timeline action is 
automatically attached to the BODY tag with the onLoad event when you select 
Autoplay in the Timeline inspector. 

To use the Play Timeline and Stop Timeline actions: 

1 Choose Window > Timeline to open the Timeline inspector, and make sure 
that your document contains a timeline. 

If you don’t see any purple animation bars in the Timeline inspector, your 
document does not contain a timeline. See “Creating a timeline animation” on 
page 255. 

2 Select an object and open the Behavior inspector. 

3 Click the plus (+) button and choose Play Timeline or Stop Timeline from the 
Actions pop-up menu. 

4 Select the timeline you want to play or stop, or choose to stop all timelines, 
from the pop-up menu. 

5 Click OK. 

6 Check that the default event is the one you want. 

If it isn’t, choose another event from the pop-up menu. If the events you want 
are not listed, change the target browser in the Events For pop-up menu. 
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Validate Form 


The Validate Form action checks the contents of specified text fields to ensure that 
the user has entered the correct type of data. Attach this action to individual form 
fields with the onBlur event to validate the fields as the user is filling out the form, 
or attach it to the form with the onSubmit event to evaluate several fields at once 
when the user clicks the Submit button. Attaching this action to a form prevents 
the form from being submitted to the server if any of the specified fields contains 
invalid data. 

To use the Validate Form action: 

1 Choose Insert > Form or click the Form button on the Object palette to 
insert a form. 

2 Choose Insert > Form Object > Text Field or click the Text Field button on the 
Object palette to insert a text field. 

Repeat this step to insert additional text fields. 

3 Do one of the following: 

• To validate individual fields as the user fills out the form, select a text field and 
choose Window > Behaviors. 

• To validate multiple fields when the user submits the form, click the <form> 
tag in the tag selector in the bottom left corner of the Document window and 
choose Window > Behaviors. 

4 Choose Validate Form from the Actions pop-up menu. 

5 Do one of the following: 

• If you are validating individual fields, select the same field that you have 
selected in the Document window from the Named Fields list. 

• If you are validating multiple fields, select a text field from the Named 
Fields list. 

6 Select the Required option if the field must contain some data. 

7 Choose from one of the following Accept options: 

• Use Anything if the field is required but need not contain a particular kind of 
data. (If the Required option is not selected, the Anything option is 
meaningless —that is, it is the same as if the Validate Form action were not 
attached to the field.) 

• Use E-mail address to check that the field contains an @ symbol. 

• Use Number to check that the field contains only numerals. 

• Use Number From to check that the field contains a number in a specific range. 
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8 If you are validating multiple fields, repeat steps 6 and 7 for any additional 
fields that you want to validate. 

9 Click OK. 

If you are validating multiple fields when the user submits the form, the 
onSubmit event automatically appears in the Events pop-up menu. 

10 If you are validating individual fields, check that the default event is onBlur 
or onChange. 

If it isn’t, select onBlur or onChange from the pop-up menu. Both of these events 
trigger the Validate Form action when the user moves away from the field. The 
difference between them is that onBlur occurs whether or not the user has typed 
in the field, and onChange occurs only if the user changed the contents of the 
field in any way. The onBlur event is preferred when you have specified that the 
field is required. 


Updating a behavior 

If your pages contain behaviors created with an older version of Dreamweaver, 
those behaviors are not updated automatically when you open the pages in 
the current version of Dreamweaver. However, when you update one occurrence 
of a behavior in a page, all other occurrences of that behavior in that page are 
also updated. 

To update a behavior in a page: 

1 Select an element that has the behavior attached to it. 

2 Open the Behavior inspector. 

3 Double-click the behavior. 

4 Click OK in the behavior’s dialog box. 

All occurrences of that behavior in that page are updated. 
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CHAPTER 13 

Editing HTML 


Dreamweaver provides graphical interfaces for creating and editing HTML files. 
However, sometimes you may need to have direct access to the underlying HTML 
code. Dreamweaver provides such access in the form of the HTML Source 
inspector (see “Using the HTML Source inspector” on page 335) and the Quick 
Tag Editor (see “Editing an HTML tag in the Document window” on page 336). 

Dreamweaver also provides useful ways of handling HTML files that were 
created outside of Dreamweaver. With Roundtrip HTML, you can be sure 
that Dreamweaver won’t change your handcrafted HTML code unless you 
want it to; you can set a variety of options for what Dreamweaver rewrites and 
what it doesn’t. (See “Setting HTML Format Preferences” on page 342.) 
Conversely, Dreamweaver can clean up cluttered and unnecessary HTML at your 
preference, using the Clean Up HTML and Clean Up Word HTML features—see 
“Cleaning Up HTML” on page 347 and “Cleaning up Microsoft Word HTML” 
on page 348. 
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About Roundtrip HTML 

Roundtrip HTML is a unique feature of Dreamweaver that lets you move your 
documents back and forth between a text-based HTML editor and Dreamweaver 
with little or no effect on the content and structure of the document’s original 
HTML source code. Dreamweaver even maintains and renders some HTML that 
is technically invalid (such as a FONT tag wrapped around multiple P tags) if such 
code is supported by browsers. However, the HTML source code that 
Dreamweaver generates as you edit graphically is always technically valid. 

The following are key features of Roundtrip HTML: 

• By default, Dreamweaver rewrites overlapping tags, closes open tags that aren’t 
allowed to remain open, and removes extra closing tags when you switch back 
to Dreamweaver from an external HTML editor or when you open an existing 
HTML document. If you don’t want Dreamweaver to rewrite any source 
HTML, choose Edit > Preferences, then select HTML Rewriting to turn off all 
rewriting. See “Setting HTML Rewriting preferences” on page 343. 

• Dreamweaver displays markers in the document window for invalid HTML 
that it does not support. The invalid tags are highlighted in yellow. When you 
select an invalid tag, Dreamweaver displays information in the Property 
inspector about how to correct the error. If you turn off HTML rewriting, any 
HTML that Dreamweaver would have rewritten is displayed as invalid. 

• Dreamweaver does not change tags that it does not recognize—including XML 
tags—because it has no criteria by which to judge them valid or invalid. If an 
unrecognizable tag overlaps a valid one, Dreamweaver may mark it as erroneous 
but does not rewrite the code. For example, the custom tag in the following 
would be marked erroneous: <MyNewTagxb>text</MyNewTagx/b>. 

• Dreamweaver does not alter ColdFusion Markup Language (CFML) or 
Microsoft Active Server Page (ASP) tags, and it displays icons to identify blocks 
of CFML or ASP code in the Document window whenever possible. See 
“Editing ColdFusion and Active Server files in Dreamweaver” on page 351. 

• Dreamweaver lets you launch a text-based HTML editor to edit the current 
document. Dreamweaver is integrated with HomeSite (Windows) and BBEdit 
(Macintosh). See “Using external HTML editors” on page 350. 
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Using the HTML Source inspector 

The HTML Source inspector displays the HTML source code for the current 
document. Tags are color coded to preference settings. See “Setting HTML Colors 
preferences” on page 346. As you add or change content in the Document 
window, Dreamweaver immediately displays the changes in the HTML Source 
inspector. This makes the HTML Source inspector a useful tool for learning 
HTML if you don’t already know it, or for reminding yourself of proper syntax or 
values for specific tags or attributes. 

Changes you make in the HTML Source inspector appear in the Document 
window only when you click away from the HTML Source inspector. 
Dreamweaver never rewrites HTML that you type directly in the HTML Source 
inspector; if you enter invalid HTML here, Dreamweaver highlights the tags as 
invalid when you click in the Document window. 


To open the HTML Source inspector, do one of the following: 

• Choose Window > HTML Source. 

• Click the HTML Source inspector icon in the Launcher or in the Mini- 
Launcher (in the lower right corner of the Document window). 

• Press F10. 



In the HTML Source inspector, you can turn line wrap on or off by selecting or 
deselecting the Wrap option. (Note that turning on line wrap does not insert line 
breaks into the HTML code; it simply displays the lines as wrapped for ease of 
viewing.) You can also choose whether or not to display line numbers by selecting 
or deselecting the Line Numbers option. 

To launch an external HTML editor, click the External Editor button. If you 
haven’t chosen an external HTML editor, you must first choose Edit > 
Preferences, choose the External Editors category, and pick an external editor. For 
more information, see “Using external HTML editors” on page 350. 


To toggle between the Document window and the HTML Source inspector: 

Press Control+Tab (Windows and Macintosh). 
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Editing an HTML tag in the Document window 

Use the Quick Tag Editor to quickly inspect and edit the HTML source of a single 
tag from within the Document window, without having to switch to the HTML 
Source inspector and back again. The easiest way to open the Quick Tag editor is 
to press Control+T (Windows) or Command+T (Macintosh). 

The Quick Tag Editor has these three modes: 

• Insert HTML, used to insert new HTML code 

• Edit Tag, used to edit an existing tag 

• Wrap Tag, used to wrap a new tag around the current selection 

The current selection in the Document window determines which mode the 
Quick Tag Editor opens in. 

Note: When the Quick Tag Editor is open, you can switch from one mode to another using 
the same keyboard shortcut you used to open the Quick Tag Editor. 

In all three modes, the basic operation of the Quick Tag Editor is the same: you 
open the editor, enter or edit tags and attributes, and then close the editor. The 
difference among the modes lies in what Dreamweaver does with the tags when 
you’ve edited them. For details about the modes, see “About Insert HTML mode” 
on page 339, “About Edit Tag mode” on page 340, and “About Wrap Tag mode” 
on page 340. 

Note: Whenever the Quick Tag Editor is showing, in any mode, you can drag the editor's 
handle (where the mode name appears) to move the editor around. 

To perform more extensive HTML editing, use the HTML Source inspector. 
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To enter or edit tags and attributes in the Quick Tag Editor: 

1 Do one of the following: 

• Select an object, some text, or a tag. 

• Click in the Document window to place the insertion point without 
selecting anything. 

2 Press Control+T (Windows) or Command+T (Macintosh), or click the Quick 
Tag Editor button in the Property inspector. 

The Quick Tag Editor opens in whichever mode is appropriate, depending on 
the current selection. 



In Insert HTML mode or Wrap Tag mode, you may now enter an HTML tag; 
in Edit Tag mode, you may enter new attributes, edit existing attributes, or edit 
the tag’s name. 

3 To edit existing attribute values or names (or to edit the tag name), press Tab to 
move forward from one item to the next, until the attribute (or tag) that you 
want to edit is selected. Press Shift+Tab to move backward to the previous 
attribute name, attribute value, or tag name. 
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4 If you pause for a couple of seconds while editing an attribute name, a drop¬ 
down hints menu appears, listing all the valid attributes for the tag you’re 
editing. (If Dreamweaver doesn’t recognize the tag you’re editing, the hints 
menu contains all the attributes that Dreamweaver recognizes for any tag.) The 
hints menu does not appear if you deselected the Enable Tag Hints option in 
the Quick Tag Editor panel of the Preferences dialog box. Control the hints 
menu in the following ways: 

• As you begin to type an attribute name, the hints menu scrolls to highlight the 
first attribute name that starts with the letters you’ve typed. 

• To move the highlight up and down in the menu, use the Up and Down Arrow 
keys or the scroll bar. 

• To choose the highlighted attribute name, press Enter (Windows) or Return 
(Macintosh); the highlighted attribute name is entered into the Quick Tag 
Editor. Alternatively, double-click an attribute name in the menu to enter it. 

• To dismiss the hints menu without selecting an entry, press Esc or simply 
continue typing. 

When you pause while entering or editing a tag name, a similar drop-down 
hints menu appears, listing tag names instead of attribute names. 

5 In Edit Tag mode, if you make a change and then press Tab or Shift+Tab, the 
change you made is applied immediately. To prevent changes from being made 
until you exit the Quick Tag Editor, deselect the Apply Changes Immediately 
While Editing option in the Quick Tag Editor panel of the Preferences 
dialog box. 

Note: When Apply Changes Immediately While Editing is deselected, multiple changes 
that you apply at once appear as a single step in the History palette and are undone with 
a single Undo. 

6 To add a new attribute to a tag, use Tab, the arrow keys, and Spacebar to move 
the insertion point to where you want to add an attribute. Begin to type a valid 
attribute name for the tag. The drop-down hints menu appears when you pause 
in typing, just as it does for edited attributes. 

7 Continue to edit and add attribute names and values as desired. 

8 When you’re done editing the tag, exit the Quick Tag Editor in either of 
these ways: 

• To exit and discard all changes that have not yet been applied, press Esc. (If you 
were using Edit Tag mode with the Apply Changes Immediately While Editing 
option selected, all changes that have already been applied remain in place.) 

• To exit and apply all your changes, press Enter (Windows) or Return 
(Macintosh) or click outside the Quick Tag Editor. 

9 If you use any invalid HTML in the Quick Tag Editor, Dreamweaver attempts 
to correct it for you by inserting closing quotation marks and closing angle 
brackets where needed. 
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To select the current tag's parent (containing) tag: 

Do one of the following: 

• Press Control+Shift+< (Windows) or Command+Shift+< (Macintosh). 

• Choose Edit > Select Parent Tag. 

To select the first child tag contained in the current tag: 

Do one of the following: 

• Press Control+Shift+> (Windows) or Command+Shift+> (Macintosh). 

• Choose Edit > Select Child. 

Note: If the current tag contains no other tags, Select Child selects the contents of the 
current tag. 

To cycle through the Quick Tag Editor's modes: 

With the Quick Tag Editor active, press Control+T (Windows) or Command+T 
(Macintosh). 

The Quick Tag Editor changes modes each time you use the keyboard shortcut, 
cycling among Insert HTML mode, Edit Tag mode, and Wrap Tag mode. 


About Insert HTML mode 

The Quick Tag Editor starts in Insert HTML mode when you open it without 
anything selected. It opens showing a pair of angle brackets with the insertion 
point between them. You can enter arbitrary HTML strings in the editor in this 
mode, including multiple tags and text or other content between tags. When you 
close the editor, the HTML you’ve entered is inserted at the insertion point; if you 
leave tags unclosed, the corresponding closing tags are added automatically. 
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About Edit Tag mode 

The Quick Tag Editor starts in Edit Tag mode when the current selection consists 
of a complete tag (an opening tag, plus a corresponding closing tag if applicable, 
and the tag’s contents, if any). For example, if the selection is an image, or if it’s a 
FONT tag and the corresponding /FONT tag and all the text in between, the Quick 
Tag Editor starts in Edit Tag mode. The easiest way to ensure that the current 
selection starts and ends with matched tags is to select a tag in the tag selector at 
the bottom left of the Document window. 

The Quick Tag Editor also starts in Edit Tag mode when the current selection 
includes an unmatched opening or closing tag. In this case, the selection is 
expanded to include the current selection’s parent tag and its contents. For 
example, if the current paragraph consists of the HTML <p>They were reading 
<cite>ATale of Two Cities </cite> in class.</p>, and the current selection is reading 
<cite>A Tale, with no closing </cite> tag, the Quick Tag Editor starts in Edit Tag 
mode with the entire paragraph selected. 

In Edit Tag mode, you can edit only a single opening tag. If you move the 
insertion point past the end of the tag and enter more than one tag, an error 
message appears and everything you enter is ignored. 

About Wrap Tag mode 

When the current selection consists of something other than a complete tag (an 
opening tag, plus a corresponding closing tag if applicable, and the tag’s contents), 
the Quick Tag Editor usually starts in Wrap Tag mode. For example, if the current 
selection is text with no special formatting, the Quick Tag Editor opens in 
Wrap Tag mode. 

There is one exception to that rule: when the current selection includes an 
unmatched opening or closing tag, the Quick Tag Editor starts in Edit Tag mode 
instead of in Wrap Tag mode, and expands the selection to the current selection’s 
parent tag and its contents. 

In Wrap Tag mode, you can enter only a single opening tag. If you enter more 
than one tag, an error message appears and everything you enter is ignored. 

When you close the editor, the tag you’ve entered is inserted at the start of the 
current selection, and a matching closing tag is inserted at the end of the 
current selection. 


About the hints menus 

The hints drop-down menus display tags and attributes from the 
TagAttributeList.txt file, located in your Dreamweaver/Configuration folder. You 
can add tags to and remove tags from this file to assist you with your HTML 
editing. 


340 Chapter 13 



Removing a tag 

To remove a tag from your document (leaving its content, if any, in place), do one 
of the following: 

• Select the tag in the tag selector at the bottom left of the Document window. 
Then choose Remove Tag from the context menu. 

• Select anything in the Document window, or click to place the insertion point 
in the window. Then choose Remove Tag from the context menu. 

Note: Not all tags can be removed. 


Setting the Quick Tag Editor preferences 

Quick Tag Editor preferences let you control whether or not the edits you make in 
the Quick Tag Editor are automatically updated in the document window. You 
can also adjust the controls for the drop-down hints menu. Use the Edit > 
Preferences menu to access the Quick Tag Editor preferences panel. 

Apply Changes Immediately While Editing controls whether your Quick Tag 
Editor changes are automatically updated in your document as you move between 
attributes in Edit Tag mode. If you turn off this option, you must press Enter to 
apply your changes to the document. (This option is ignored in Insert HTML 
mode and in Wrap Tag mode; in those modes, you must always press Enter to 
apply your changes to the document.) 

Enable Tag Hints controls whether the hints list displays while you’re typing in the 
Quick Tag Editor. You can also adjust the length of the delay before the drop¬ 
down hints menu displays for the current attribute or tag. 
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Setting HTML Format Preferences 

You can set the following preferences for formatting HTML source code in 
Dreamweaver: 

• HTML Rewriting preferences determine what changes, if any, Dreamweaver 
makes to your HTML source code when you open an HTML document. See 
“Setting HTML Rewriting preferences” on page 343. 

• HTML Format preferences determine common HTML formatting options, 
such as line length and indentation. See “Setting HTML Format preferences” 
on page 344. These preferences provide a user interface for changing the 
SourceFormat.txt file. 

• HTML Colors preferences control how HTML tags (and the text between 
them) are color coded in the HTML Source inspector. See “Setting HTML 
Colors preferences” on page 346. 

• Fonts/Encoding preferences let you specify the font in which your HTML 
source code appears in the HTML Source inspector. See “Setting Fonts/ 
Encoding preferences” on page 73. 

Finally, the SourceFormat.txt file (in the Dreamweaver/Configuration folder) 
provides precise specifications for formatting HTML. Editing this file in a text 
editor gives you the greatest degree of control over exactly how Dreamweaver 
writes HTML; you can change certain tag-specific options in this file that you 
can’t change using the HTML Format preferences. However, it is recommended 
that only advanced Dreamweaver users and developers attempt to edit this file, as 
the potential for causing serious errors to your Dreamweaver program is great. See 
“Editing the HTML source formatting profile” on page 392. 
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Setting HTML Rewriting preferences 

The HTML Rewriting preferences determine what Dreamweaver does while 
opening HTML documents. These preferences have no effect when you edit 
HTML in the HTML Source inspector. If you turn off these rewriting options, 
Dreamweaver displays invalid markup items in the Document window for 
HTML that it would have rewritten. If you are importing an HTML document 
from Word, you can use the Clean Up Word HTML command to strip out any 
unnecessary HTML code. See “Cleaning up Microsoft Word HTML” on 
page 348 for more information. 

Fix Invalidly Nested and Unclosed Tags rewrites invalidly nested, or overlapping, 
tags. For example, <bxi>text</bx/i> is rewritten as <bxi>text</ix/b>. 
This option also inserts closing quotation marks and closing brackets if they 
are missing. 

Remove Extra Closing Tags deletes closing tags that have no corresponding 
opening tag. 

Warn when Fixing or Removing Tags displays a summary of technically invalid 
HTML that Dreamweaver attempted to correct. The summary notes the location 
of the problem (using line and column numbers) so that you can find the 
correction and ensure it is rendering as intended. 

Never Rewrite FITML: In Files with Extensions allows you to prevent Dreamweaver 
from rewriting HTML in files with the given file name extensions. This option 
is particularly useful for files of types that contain third-party tags (such as 
ASP tags). For more information, see “Avoiding rewriting third-party tags” on 
page 405. 

The two Special Characters options allow you control over whether Dreamweaver 
encodes certain characters in certain contexts. In general, it’s best to leave these 
options selected unless your files contain certain third-party tags that use the 
characters in question. For more information on these options, see “Avoiding 
rewriting third-party tags” on page 405. 
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Setting HTML Format preferences 

Use the following HTML Format preferences to control HTML formatting such 
as indentation, line length, and the case of tag and attribute names as you create 
documents. For information on additional HTML formatting controls, see 
“Editing the HTML source formatting profile” on page 392. Note that the 
following options (except for Override Case Of) affect only new documents and 
new additions (in the Document window) to existing documents. That is, when 
you open a previously created HTML document, these formatting options are not 
applied to it; to reformat existing HTML documents, use the Apply Source 
Formatting command. See “Formatting the HTML source code in existing 
documents” on page 348. 

Note: These options apply only to changes you make in the Document window; they do not 
apply when you edit HTML directly in the HTML Source inspector. 

Indent turns on indentation of all tags marked INDENT in the SourceFormat.txt file. 
See “Editing the HTML source formatting profile” on page 392. 

Use specifies whether to indent using spaces or tabs. 

Table Rows and Columns automatically indents TR and TD tags to make reading 
table code easier. The Indent option must be selected for this option to work. 

Frames and Framesets automatically indents FRAME and nested FRAMESET tags to 
make reading frameset files easier. The Indent option must be selected for this 
option to work. 

Indent Size determines the size of indents, in spaces if Use is set to spaces, or in 
tabs if Use is set to tabs. For example, if Use is set to tabs and Indent Size is set to 
4, tags will be indented using four tabs. 

Tab Size determines the size of tabs (measured in character spaces). 

Note: If Indent Size is not a multiple of Tab Size and Use is set to tabs, tags are indented 
using a combination of tabs and space characters. 

Automatic Wrapping wraps lines (with a hard return) once they reach the specified 
column width. (Note that Dreamweaver inserts hard returns only in places where 
they don’t change the appearance of the document in browsers, so some lines may 
remain longer than the Automatic Wrapping option specifies.) By contrast, the 
Wrap checkbox in the HTML Source inspector adds a soft return for lines that 
extend beyond the width of the window. 
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Line Breaks specifies the type of remote server (Windows, Macintosh, or UNIX) 
that hosts your remote site. Choosing the correct type of line break characters 
ensures that your HTML source code appears correctly when viewed on the 
remote server. (Note that for FTP, this setting applies only to binary transfer 
mode; Dreamweaver’s ASCII transfer mode ignores this setting. If you download 
files using ASCII mode, Dreamweaver sets line breaks based on the operating 
system of your computer; if you upload files using ASCII mode, the line breaks 
are all set to CR LF.) This setting is also useful when you are working with an 
external text editor that recognizes only certain kinds of line breaks. For example, 
use CR LF (Windows) if Notepad is your external editor, and CR (Macintosh) if 
SimpleText is your external editor. 

Case for Tags and Case for Attributes control the capitalization of tag and 
attribute names. These options are applied to tags and attributes that you insert or 
edit in the Document window, but they are not applied to the tags and attributes 
that you enter directly in the HTML Source inspector, or to the tags and 
attributes in a document when you open it (unless you also select one or both of 
the Override Case Of options). 

Override Case Of: Tags and Attributes specify whether to enforce your specified 
case options at all times, including when you open an existing HTML document. 
When you select one of these options, all tags or attributes in open documents are 
immediately converted to the specified case, as are all tags or attributes in each 
document you open from then on (until you deselect this option again). Tags or 
attributes you type in the HTML Source inspector and the Quick Tag Editor are 
also converted to the specified case, as are tags or attributes that you insert using 
the Object palette. For example, if you want tag names always to be converted to 
lowercase, specify lowercase in Case for Tags, and then select the Override Case 
Of: Tags option. Then when you open a document that contains uppercase tag 
names, Dreamweaver converts them all to lowercase. 

Centering specifies whether elements should be centered using DIV ALIGN="center“ 
or CENTER. Both are part of the HTML 4.0 Transitional specification, but CENTER 
is supported by a wider range of browsers. 
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Setting HTML Colors preferences 

Use the HTML Colors preferences to control the background, text, and tag colors 
in the HTML Source inspector. 

Background specifies the background color of the HTML Source inspector. 

This color appears only when you click or type in the HTML Source inspector; 
when focus is not in the HTML Source inspector, its background color is a 
medium gray. 

Text specifies the color of text that appears between tags (for example, in the 
code <b>some text</b>, the words “some text” appear in Text color, but the 
tags do not). To override the Text color for a specific tag, select the Include 
Contents option. 

Comments specifies the color for comment tags (<!->) and their contents. 

Tag Default specifies the color for all tags except comments. To override the Tag 
Default color, set the color for specific tags. 

Tag Specific allows you to override the Tag Default and Text color settings by 
specifying colors for specific tags. 

To set a color for a specific tag: 

1 Select a tag in the Tag Specific box. 

Shift-click to select multiple adjacent tags or Control-click (Windows) or 
Command-click (Macintosh) to select multiple nonadjacent tags. 

2 Click the radio button next to the color swatch at the bottom of the panel and 
use one of these methods to choose a new color value: 

• In the text field next to the swatch, enter a hexadecimal value. 

• Click the color swatch and select a new color from the palette of browser-safe 
colors or the system color picker. 

3 To color the text between the opening and closing tags, select Apply Color to 
Tag Contents. 
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Cleaning Up HTML 

Use the Clean Up HTML command to remove empty tags, combine nested FONT 

tags, and otherwise improve messy or unreadable HTML code. 

To clean up HTML code: 

1 Open an existing document and choose Commands > Clean Up HTML. 

2 In the dialog box that appears, select from the following options: 

• Remove Empty Tags removes any tags that have no content between them. For 
example, <bx/b> and <FONT COLOR="FFOOOO"x/FONT> are considered 
empty tags, but the <b> tag in <b>some text</b> is not. 

• Remove Redundant Nested Tags removes all redundant instances of a tag. For 
example, in the code <b>This is what I <b>really</b> wanted to say</b>, the B 
tags surrounding the word “really” are redundant and would be removed. 

• Remove Non-Dreamweaver HTML Comments removes all comments that 
were not inserted by Dreamweaver. For example, <!— begin body text— > would 
be removed, but <!— #BeginEditable "doctitle" —> would not (because it is a 
Dreamweaver comment that marks the beginning of an editable region in 

a template). 

• Remove Dreamweaver HTML Comments removes all comments that were 
inserted by Dreamweaver. For example, <!— #BeginEditable "doctitle" —> would 
be removed, but <! —begin body text-> would not (because it is not a 
Dreamweaver comment). Removing Dreamweaver comments turns template- 
based documents into ordinary HTML documents and library items into 
normal HTML code (that is, they cannot be updated whenever the original 
template or library item changes). 

• Remove Specific Tag(s) removes the tags specified in the adjacent text field. Use 
this option to remove custom tags inserted by other visual editors and other 
tags that you do not want to appear on your site (for example, BLINK). Separate 
multiple tags with commas (for example, FONT, BLINK). 

• Combine Nested <font> Tags When Possible consolidates two or more FONT 
tags when they control the same range of text. For example, <FONT 
SIZE=“7"xF0NT COLOR="#FFOOOO">big red </FONT> </F0NT> would be changed 
to <FONT SIZE="7" COLOR="#FFOOOO">big red</FONT>. 

• Show Log on Completion displays an alert box with details about the changes 
made to the document as soon as the clean-up is finished. 

3 Click OK. 

Depending on the size of your document and the number of options selected, 
it may take several seconds to complete the clean-up. 
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Formatting the HTML source code in existing documents 

The HTML source formatting options that you specify in HTML Format 
preferences and the SourceFormat.txt file apply only to any subsequent new 
documents that you create with Dreamweaver. To apply these formatting options 
to existing HTML documents, use the Apply Source Formatting command. 


To apply HTML source formatting options to an existing document: 

1 Choose File > Open to open an existing HTML file in the Document window. 

2 Choose Commands > Apply Source Formatting. 

Cleaning up Microsoft Word HTML 

In Dreamweaver, you can open or import documents saved by Microsoft Word as 
HTML files, and then you can use the Clean Up Word HTML dialog box to 
remove the extraneous HTML code generated by Word. The code that 
Dreamweaver removes is primarily used by Word to format and display 
documents in Word and is not needed to display the HTML file. Retain a copy of 
your original Word (.doc) file as a backup, because you may not be able to reopen 
the HTML document in Word once you’ve applied the Clean Up Word HTML 
feature. The Clean Up Word HTML command is available for documents saved 
as HTML files by Word 97 or later. 


To use the Clean Up Word HTML feature: 

1 In Microsoft Word, save your document as an HTML file. 

2 Open the HTML document in Dreamweaver using either of the 
following methods: 

• Choose File > Import > Import Word HTML and select a file to open. 

Dreamweaver opens the file and then automatically opens the Clean Up Word 
HTML dialog box. 

• Choose File > Open and select a file to open. 

An HTML Corrections log file is automatically generated. This is not part of 
the Clean Up Word HTML feature. Click Continue to exit the dialog box. 
Then, in Dreamweaver, choose Commands >Clean Up Word HTML. 

3 With either of these methods, there may be a slight delay while Dreamweaver 
attempts to determine which version of Word was used to save the file. If 
Dreamweaver is unable to determine this, select the correct version using the 
pop-up menu. 
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4 Choose which options the Clean Up Word HTML feature should use. The 
Basic tab displays the following options: 

• Remove all Word Specific Markup removes all Word-specific HTML, 
including XML from <html> tags, Word custom meta data and link tags in the 
head of the document, Word XML markup, conditional tags and their 
contents, and empty paragraphs and margins from styles. You have the option 
of selecting each of these options individually using the Detailed tab. 

• Clean up CSS removes all Word-specific CSS, including Inline CSS styles 
when possible (where the parent style has the same style properties), style 
attributes beginning with “mso,” non-CSS style declarations, CSS style 
attributes from tables, and all unused style definitions from the head. This 
option can be further customized by clicking on the Detailed tab. 

• Clean up <font> Tags removes HTML tags, converting the default body text to 
size 2 HTML. 

• Fix Invalidly Nested Tags removes the font markup tags inserted by Word 
outside of the paragraph and heading (block level) tags. 

• Set Background Color allows you to enter a hex value to set the background 
color of your document. If you do not set a background color, your Word 
HTML document will have a gray background. The default hex value set by 
Dreamweaver is white. 

• Apply Source Formatting applies the source formatting options you specify in 
HTML Format preferences and Source Format.profile to the document. 

• Show Log on Completion displays an alert box with details about the changes 
made to the document as soon as the clean-up is finished. 

5 Click OK. 

Depending on the size of your document and the number of options selected, 
it may take several seconds to complete the clean-up. The preferences you 
entered are automatically saved as the default Clean Up Word HTML settings. 


Correcting invalid markup 

If you see HTML code highlighted in bright yellow in either the Document 
window or the HTML Source inspector, Dreamweaver has found invalid HTML 
that it cannot display. Often these invalid HTML markers will appear when you 
begin to type a tag in the HTML Source inspector and then switch to the 
Document window without completing the tag. 

To correct the problem, click the yellow Invalid HTML marker and 
follow the suggestion in the Property inspector. See also “About Roundtrip 
HTML” on page 334. 
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Using external HTML editors 

You may want to use a text editor to hand-code large amounts of HTML, 
JavaScript, or VBScript. You can use any external text editor with Dreamweaver, 
including Notepad (bundled with Windows 95 and NT) or SimpleText (bundled 
with the Macintosh), BBEdit, HomeSite, vi, emacs, andTextPad. See “Using an 
external text editor with Dreamweaver” on page 350 and “Using BBEdit with 
Dreamweaver (Macintosh only)” on page 351. 


Using an external text editor with Dreamweaver 

You can launch your primary external text editor from Dreamweaver to edit the 
source HTML for the current document and then switch back to Dreamweaver to 
continue editing graphically. Dreamweaver detects any changes that have been 
saved to the document externally and prompts you to reload the document 
upon returning. 

If you use BBEdit on the Macintosh, follow the steps in “Using BBEdit with 
Dreamweaver (Macintosh only)” on page 351 instead of the following steps. 

To set up external editors for file types other than text and HTML, see 
“Launching an external media editor” on page 282. 

To choose an external HTML editor: 

1 Choose Edit > Preferences. 

2 Select External Editors from the Category list on the left. 

3 (Macintosh only) To use an HTML editor other than BBEdit, deselect the 
Enable BBEdit Integration option. To use BBEdit, leave Enable BBEdit 
Integration selected and skip the rest of these steps. 

4 Click the Browse button next to the HTML Editor box to choose a text editor. 

5 In the Reload Modified Files option, specify what you want Dreamweaver to 
do when it detects that changes have been made externally to a document that 
is open in Dreamweaver. 

6 In the Save on Launch option, specify whether Dreamweaver should always 
save the current document before launching the editor, never save the 
document, or prompt you to ask whether to save or not each time you launch 
the external editor. 

To launch the external HTML editor: 

Choose Edit > Launch External Editor or click External Editor in the upper left 
corner of the HTML Source inspector. 
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Using BBEdit with Dreamweaver (Macintosh only) 

When BBEdit integration is turned on, once you have a document open in 
both BBEdit and Dreamweaver, switching from one application to the other 
automatically updates the document with the latest changes. In addition, 
both programs track the current selection; for example, you can make a 
selection in Dreamweaver and then switch to BBEdit, where the same element 
will be selected. 

You can disable BBEdit integration if you prefer working with an older version of 
BBEdit or a different HTML text editor. Selections are not tracked if BBEdit 
integration is turned off. 

To use BBEdit with Dreamweaver: 

1 Do one of the following: 

• Choose Edit > Launch External Editor. 

• Click External Editor in the top left corner of the HTML Source inspector. 

2 Edit the document in BBEdit. 

3 Click the Dreamweaver button on the HTML Tools palette in BBEdit to 
return to Dreamweaver. 

To disable BBEdit integration: 

1 Choose Edit > Preferences. 

2 Choose External Editors from the Category list on the left. 

3 Deselect Enable BBEdit Integration and click OK. 

Editing ColdFusion and Active Server files in Dreamweaver 

Dreamweaver displays icons to identify blocks of ColdFusion Markup 
Language (CFML) or Active Server Page (ASP) code in the Document 
window whenever possible. 

Note: By default, Dreamweaver never rewrites HTML found in ColdFusion and Active 
Server files. 

To edit a block of ASP code from the Document window: 

1 Click the yellow ASP marker to select it. 

2 In the Property inspector, click the Edit button. 

3 Edit the ASP code in the dialog box that appears and then click OK. 
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To edit a block of CFML code from the Document window: 

1 Click the CFML marker to select it. 

2 In the Property inspector, do one of the following: 

• Click the Attributes button to edit the tag’s existing attributes and their values 
or to add new ones. 

• Click the Content button to edit the content that appears between the opening 
and closing CFML tags. If the selected tag is an empty tag (that is, if it has no 
closing tag), the Content button is disabled. 

If you don’t see markers or highlighted text where you know ASP or CFML code 
exists, first make sure that View > Invisible Elements is enabled. If that option is 
selected and the icons are still not visible, then Dreamweaver can’t display the code 
as CFML or ASP. This can happen, for example, when conditionals are inserted 
into HTML tags, as in the following ASP code: 

<input type="checkbox" name="month" value=“October" 

<% if month="October" then %>checked<% end if %> 


To edit CFML or ASP code when a marker or highlighted text does not appear: 

1 If you can select the tag or object that contains the code, use the Quick Tag 
Editor to edit the code. See “Editing an HTML tag in the Document window” 
on page 336. Otherwise, follow these steps: 

2 In the Document window, position the insertion point near where you know 
the CFML or ASP code exists. 

3 Choose Window > HTML Source to open the HTML Source inspector. 

4 Click the title bar of the HTML Source inspector to shift keyboard focus to 
that inspector. 

Do not click in the middle of the inspector or you will move the insertion point 
away from the CFML or ASP code you want to edit. 

5 Edit the code directly in the HTML Source inspector. 

6 Press F10 to close the HTML Source inspector and return to the 
Document window. 

For information about processing CFML or ASP code and viewing the results in 
the Document window, see “Customizing the interpretation and appearance of 
third-party tags” on page 399. 
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Inserting scripts 

You can enter JavaScript and VBScript in the Document window without having 
to use the HTML Source inspector. 

To display script markers in the document window, choose View > Invisible 
Elements. See also “Setting Invisible Elements preferences” on page 92. 

To insert a script: 

1 Place the cursor where you want the script. 

2 Click the Script button on the Object palette or choose Insert > Script. 

3 In the dialog box that appears, choose the scripting language from the 
pop-up menu. 

If you are using JavaScript and are unsure of the version, choose JavaScript 
rather than JavaScript 1.1 or JavaScript 1.2. 

4 Enter the code that should appear between the script tags. 

To link to an external script file, click OK without typing anything and then 
add the reference to the source file in the Property inspector (type the file name 
in the Source box, or click the folder icon to browse to and select the file). 

To edit the script: 

1 Select the Script icon. 

2 In the Property inspector, click Edit. 

Setting script properties 

The following properties appear in the Property inspector when you have a script 
marker selected: 

Language specifies either JavaScript or VBScript as the language of the script. 

Source specifies an externally linked script file. Type the path or click the folder to 
choose the file. 

Edit opens the Script window, enabling you to make changes to your script. 
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Inserting comments 

A comment is descriptive text that you insert in the HTML to explain the code or 
to provide other information. A comment does not affect the appearance of the 
document in a browser. If you want to add more information about any file in 
your site, you can also use Design Notes. For more information, see “About 
Design Notes” on page 172. 

See also “Setting Invisible Elements preferences” on page 92. 

To insert a comment: 

1 Place the insertion point where you want the comment. 

2 Click the Comment button in the Invisibles panel of the Object palette or 
choose Insert > Comment. 

To display comment markers in the Document window, choose View > 

Invisible Elements. 

To enter comment text: 

1 Select the Comments icon. 

2 Enter text in the Property inspector. 

Creating a comment generates the following HTML code: 

<!— Comment text~> 
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CHAPTER 14 

Templates and Libraries 


Dreamweaver templates and libraries can help you create Web pages with a 
consistent design. Using templates and libraries also makes it easy to maintain 
your Web site, since you can redesign your site and change hundreds of pages 
in seconds. 

A template is a document that you can use as the foundation for other documents. 
When you create a template, you can indicate which elements of a page should 
remain constant (noneditable) and which elements can be changed. For example, 
if you are publishing an online magazine, the masthead probably won’t change, 
but the title and content of the feature story will change in every issue. To indicate 
the style and location of the feature story, you can use placeholder text and define 
it as an editable region. To add a new feature article, the writer just selects the 
placeholder text and types the article over it. 

You can modify a template even after you have used it to create documents. Then, 
when you update documents that use the template, the locked (noneditable) 
sections of those documents are updated to match the changes to the template. 

Dreamweaver also provides two ways to deal with recurring content so that you 
don’t have to change it on every page of the site: library items and server-side 
includes. You might use these approaches for content that appears on every page 
of the site (such as a header or footer) or for content that appears on only a few 
pages but must be updated frequently (such as news headlines or sales specials). 
These approaches are appropriate to different kinds of sites: 

• Library items are safe to use on every site and should always be used for sites 
that will be viewed locally. See “About library items” on page 369. 

• Server-side includes can be used only for sites that are viewed from a server, and 
only on servers that are configured to process server-side includes. (Ask your 
webmaster or system administrator whether your Web server supports server- 
side includes.) See “Using server-side includes” on page 375. 
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Setting Highlighting preferences 

In templates and files based on templates, editable regions and locked regions are 
highlighted in different colors. Highlighting preferences let you customize the 
colors used in the Document window to identify template regions and library 
items. For more information, see the following sections: 

• To customize template highlight colors, see “Setting template preferences” on 
page 360. 

• To specify the highlight color for library items, see “Setting library preferences” 
on page 370. 

• You can also specify a highlight color for content tagged with third-party tags. 
See “How custom tags appear in the Document window” on page 403. 
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Creating templates 

You can create a template from an existing HTML document and then modify it 
to suit your needs, or you can create a template from scratch, starting with a blank 
HTML document. 

Templates are automatically stored in the Templates folder in the local root folder 
for the site. If this folder does not already exist, Dreamweaver creates it when you 
save a new template. 

To save an existing document as a template: 

1 Choose File > Open and select a document. 

2 Choose File > Save as Template. 

3 In the dialog box that appears, select a site and enter a name for the template in 
the Save As box. 

4 Click Save. 

To create a new, blank template: 

1 Choose Window > Templates. 

2 In the Template palette, do one of the following: 

• Click the context menu button, then select New Template. 

• Click the New Template icon in the lower right area of the Template palette. 

• In the Template palette list, right-click (Windows) or Control-click 
(Macintosh) then in the context menu, select New Template. 

A new, untitled template is added to the list of templates in the palette. 

3 While the template is still selected, enter a name for the template. 

To edit a template: 

1 Choose Window > Templates. 

2 In the Template palette, double-click the name of the template. 

3 Edit the template in the Document window. 

If you want to store additional information about a template, you can create a 
Design Notes file for the template. The documents based on the template do not 
inherit the template’s Design Notes. (For more information on Design Notes, see 
“About Design Notes” on page 172.) 
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Setting template page properties 

Documents created from a template inherit the template’s page properties, except 
for the page title. If a document uses a template, you can change the document’s 
title, but any changes you make to its other page properties are ignored. 

You define a template’s page properties using the Modify > Page Properties 
command. If you need to change a document’s page properties after the template 
has been applied, you must modify the template’s page properties and then update 
the pages that use the template. See “Modifying templates and updating the site” 
on page 366. 

To define the template's page properties: 

1 Open the template and choose Modify > Page Properties. 

2 Specify the desired options for the page and click OK. 

To learn more about page properties, see Page properties in Dreamweaver Help. 
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Defining a template's editable regions 

In a template, editable regions are the parts of a page that change—for example, 
an article in a newsletter. Locked (noneditable) regions are the areas that remain 
constant from one page to another, such as a masthead or corporate logo. 

By default, all regions on a template are marked as locked when you save it; to 
make the template useful, you must make some parts of it editable. 

While you are editing the template itself, you can make changes to both editable 
and locked regions. When the template is applied to a document, however, you 
can make changes only to the editable regions of the document; the locked regions 
of the document can’t be modified. 

Note: When you name a region, you can't use the following characters: single or double 
quotation marks (‘ "), angle brackets (< >), and ampersands (&). 


To define existing template content as an editable region: 

1 In the template, select the text or content you want to make editable. 

2 Choose Modify > Templates > Mark Selection as Editable. 

3 In the New Editable Region dialog box, enter a name for the region. 

The editable region is highlighted in the template. 

You can mark an entire table or an individual table cell as editable; however, 
you can’t mark several cells at once. Layers and layer content are separate 
elements; making a layer editable lets you change the position of the layer, and 
making layer content editable lets you change the content of a layer. 

To define a new editable region in a template: 

1 In the template, place the insertion point where you want to insert an 
editable region. 

2 Choose Modify > Templates > New Editable Region. 

3 In the New Editable Region dialog box, enter a name for the region. 

The region name, surrounded by braces ({}), is inserted into the template as a 
highlighted placeholder. 

When you apply the template to a document, you can replace the placeholder 
with text, images, or other content. 
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Setting template preferences 

You can use Dreamweaver’s highlighting preferences to customize the highlight 
colors for the editable and locked regions of a template. The editable region color 
appears in the template itself; the locked region color appears in documents that 
use the template. You can use these colors to help remind yourself (and whoever is 
using your templates) of the sections that cannot be edited in the document. 

To change template highlight colors: 

1 Choose Edit > Preferences and select Highlighting. 

2 Click the Editable Regions color box and select a highlight color. Do the same 
for Locked Regions. 

3 Click Show to toggle the display of these colors in the Document window. 

4 Click OK. 

To view highlight colors in the Document window: 

Choose View > Invisible Elements. 

Highlight colors only appear in the document window when View > Invisible 
elements is on. 
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Viewing editable and locked regions 

Editable and locked regions appear in the Document window as highlighted text 
and objects. (For information about setting highlighting preferences, see “Setting 
template preferences” on page 360.) 

In templates, only editable regions are highlighted. However, you can make 
changes to both editable and locked content. 


Both locked and 
editable regions 
can be modified 



Editable regions 
are highlighted 


In documents using templates, only locked regions are highlighted. You can make 
changes only to the editable (nonhighlighted) content. 


Q 



Locked regions 
are highlighted 


Only editable regions 
can be modified 
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Editable HTML 
is highlighted 


Both editable and 
locked regions can 
be modified 


Viewing editable and locked HTML 

Editable content is delimited in HTML with the Dreamweaver comments 
#BeginEditable and #EndEditable. The HTML source code for an editable 
placeholder named Edit-Region would look like this: 

<!— #BeginEditable "Edit-Region" —> 

{Editable-Region} 

< I— #EndEditable --> 

The HTML for an editable table named Edit-Table would look like this: 

<!-- #BeginEditable "Edit-Table" --> 

<table width = "77%" border="1 "> 

<tr> 

<td>&nbsp;</td> 

<td>&nbsp;</td> 

</tr> 

</table> 

<!— #End Edita ble --> 

For templates, editable regions are highlighted in the HTML Source inspector. 
However, you can make changes to both editable and locked HTML source code. 
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For documents using templates, locked regions are highlighted in the HTML 
Source inspector. You can make changes only to the editable (nonhighlighted) 
HTML source code. 


Locked HTML — 
is highlighted 

Only editable — 
HTML can be 
modified 
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Unmarking a region 

If you mark a region as editable and then want to lock it (make it noneditable) 
again, use the Unmark Editable Region command. 

To unmark a region (make it noneditable): 

1 Choose Modify > Templates > Unmark Editable Region. 

2 Select the region name from the list and click OK. 

The region is locked. 


Using styles, timelines, and behaviors in templates 

Custom styles, timelines, and behaviors are fully supported in templates. To use 
styles, timelines, or behaviors in a template they must be defined in an editable 
region of a document which uses a template. 

For more information, see “Formatting text with CSS style sheets” on page 188, 
“About timelines” on page 253, and “Using Behaviors” on page 297. 
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Using the Template palette 

Use the Template palette to create new templates and manage existing templates. 

To open the Template palette: 

Choose Window > Templates. 

The top pane of the Template palette lists all of the available templates for a local 
site. The lower pane displays the contents of the selected template. 

To edit a template: 

Select a template from the list and click Open, or double-click the template name 
in the list. 


To rename a template: 

Click once on the name of the template to select it; then click again. When the 
name becomes an editable field, type a new name. 

When you rename a template, references to the template are not automatically 
updated. You must reapply the newly named template to documents that 
reference it. See “Creating documents based on templates” on page 365. 
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Creating documents based on templates 

You can use a template as a starting point for a new document or apply it to an 
existing document. 

To create a new document based on a template, do one of the following: 

• Choose File > New From Template. In the dialog box that appears, choose a 
template and then click Select. 

• Choose File > New to create a new document and then apply a template to it 
by dragging a template from the Template palette. 

To apply a template to an existing Dreamweaver document: 

Open the document. Then do one of the following: 

• Choose Modify > Templates > Apply Template to Page. Choose a template 
from the list and click Select. 

• Drag the template from the Template palette to the Document window. 

• Select the template in the Template palette, and click Apply to Page. 

When you apply a template to an existing document, the content in the template 
is added to the document. 

If a document already has a template applied to it. Dreamweaver compares the 
editable region names of the two templates, and inserts the content of the new 
template into the region names with a match in the old template. 

If any of the editable region names don’t match, or if an editable region in the 
previous template doesn't have a corresponding region in the new template, a 
dialog box prompts you to delete the extraneous regions or transfer them to the 
new template. If there are more editable regions in the new template than in the 
old template, the additional regions will appear in the documents as placeholders. 


Finding a document's editable regions 

All of the editable regions in a template’s body are listed at the bottom of the 
Modify > Templates submenu. Use this list to select and edit the regions. 

To find an editable region and select it in the document: 

Choose Modify > Templates and select the name of the region from the list. 

The region is selected in the document. Start typing to replace the content of 
the region. 
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Detaching a document from a template 

To make changes to both the locked and editable regions of a page that uses a 
template, you must first detach the page from the template. Once the page is 
detached, you can edit it as if no template were applied. However, the page will no 
longer be updated when the template is updated. 

To detach a document from a template: 

1 Open the document you want to detach. 

2 Choose Modify > Templates > Detach From Template. 

The page is detached from the template and all regions become editable. 


Modifying templates and updating the site 

When you make a change to a template, Dreamweaver prompts you to update the 
pages that use the template. You can also use the update commands to manually 
update the current page or the entire site. Applying the update commands is the 
same as reapplying the template. 

To open the template used to create the current document: 

Choose Modify > Templates > Open Attached Template. 

Now modify the content of the template as necessary. To modify the template’s 
page properties, choose Modify > Page Properties. (Documents created from a 
template inherit the template’s page properties, except for the page title.) 


To update the current document to the most current version of a template: 

Choose Modify > Templates > Update Current Page. 

To update the entire site or all documents that use a particular template: 

1 Choose Modify > Templates > Update Pages. 

The Update Pages dialog box appears. 

2 In the Look In pop-up menu, do one of the following: 

• Choose Entire Site, and then select the site name. This updates all pages in the 
selected site to their corresponding templates. 

• Choose Files That Use, and then select the template name. This updates all 
pages in the current site that use the selected template. 

3 Make sure Templates is selected in the Update option. 

4 Click Start. 
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Importing and exporting XML content 

If you use XML in your Web pages, use the XML import and export features to 
work with your XML content. You can export the editable regions of a document 
that uses a template so that you can work with that content outside Dreamweaver, 
or you can merge the content of an XML document with an existing 
Dreamweaver template. 

To export a document's editable regions as XML: 

1 Choose File > Open, and open a document that uses a template (and has 
editable regions). 

2 Choose File > Export > Export Editable Regions as XML. 

3 In the XML dialog box, choose a tag notation and click OK. 

See “Using XML tag notations” on page 368. 

4 In the dialog box that appears, enter a name for the XML file and click Save. 

When the document is exported, the generated XML file contains the name of 
the template the document is using and all editable region names. 

To import XML content: 

1 Choose File > Import XML into Template. 

2 Select the XML file and click Open. 

When the XML file is imported, Dreamweaver merges the XML content with 
the template specified in the XML file and displays the result in a new 
Document window. If the specified template is not found, Dreamweaver 
prompts you to select a template to use. 
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About XML 


XML is the Extensible Markup Language, a markup language for structured 
documents. XML is derived from SGML, the Standard Generalized Markup 
Language; like SGML, XML is a language for defining tags and the relationships 
among them. It’s like a generalization of HTML that lets you define your 
own tags. 

Tags in XML look similar to HTML tags; they consist of a tag name plus optional 
attributes, surrounded by angle brackets. As with HTML, an opening tag and a 
closing tag (in which the tag name is preceded by a slash) are used to mark the 
content between the tags. One syntactical difference is that in XML, an empty 
tag (one that contains no content, such as <img>) must end with a slash just 
before the closing angle bracket. For example, an <img> tag in XML might look 
like this: 

<img src="test.png" /> 

For more information about XML, see “HTML and Web technologies resources” 
on page 19. 

Using XML tag notations 

Dreamweaver lets you export XML content using either of two tag notations: 
editable region name tags or standard Dreamweaver XML tags. The notation you 
use depends on how XML content is incorporated into your Web site. 

The following XML code was exported from a document based on a template 
named newstemplate. The document has one editable region, named Edit-Region. 

• Editable region name tags use the names of editable regions as XML tags. In 
this example, the doctitle tag identifies the title of the template, and Edit-Region 
identifies the editable region. 

<doctitle> 

< ![CDATA[<title>newstemplate</title>]]> 

</doctitle> 

<Edit-Region> 

<! [CDATA[{ Edit-Region}]] > 

</Edit-Region> 

• Standard Dreamweaver XML tags use the item name tag. In this example, 
item name="doctitle" and item name="Edit-Region" are used to identify the title of 
the template and the editable region. 

citem name="doctitle"> 

<![CDATA[ <title>newstemplate</title>]]> 

</item> 

citem name="Edit-Region"> 

< ![CDATA[{Edit-Region}]]x/item> 

</item> 
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About library items 

Libraries contain page elements such as images, text, and other objects that you 
want to reuse or update frequently throughout your Web site. These elements are 
called library items. 

When you place a library item in a document, Dreamweaver inserts a copy of the 
HTML source code into the file and creates a reference to the original, external 
item. The reference to the external library item makes it possible to update the 
content on an entire site all at once by changing the library item and then using 
the update commands in the Modify > Library submenu. 

Dreamweaver stores library items in a Library folder within the local root folder 
for each site. You can define a different library for each site. For more information 
about the local root folder for each site, see “Creating a local site” on page 78. 


Creating a library item 

When you create a library item, you select a portion of a document’s BODY section, 
and Dreamweaver converts the selected area into a library item. 

Library items can include any BODY element, including text, tables, forms, images, 
Java applets, plugins, and ActiveX elements. Dreamweaver stores only a reference 
to linked items such as images. The original file must remain at the specified 
location for the library item to work correctly. 

Library items can also contain behaviors, but there are special requirements for 
editing the behaviors in library items; see “Editing a behavior in a library item” on 
page 373. Library items cannot contain timelines or style sheets, because the code 
for these elements is part of the HEAD section. 

To create a library item: 

1 Select a portion of a document to save as a library item. 

2 Do one of the following: 

• Choose Window > Library and drag the selection into the Library palette. 

• In the Library palette, click the context menu button, then select Create 
Library Item. 

• Click the New Library Item icon in the lower right area of the Library palette. 

• Choose Modify > Library > Add Object to Library. 

3 Enter a name for the new library item. 
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Setting library preferences 

You can customize the highlight color for library items and show or hide the 
highlight color in Highlighting preferences. 

To change the highlight color for library items: 

1 Choose Edit > Preferences and select Highlighting. 

2 Click the color box to select a color for library items. 

3 Select Show to toggle the display of the library highlight color. 

View > Invisible Elements must also be on for the library highlight color to be 
visible in the Document window. 

4 Click OK to close the Preferences dialog box. 

Adding a library item to a page 

When you add a library item to a page, the actual content is inserted in the 
document along with a reference to the original item. After the content has 
been inserted, the original item does not have to be present for the content to 
be displayed. 

To add a library item: 

1 Place the insertion point in the Document window. 

2 Choose Window > Library or click the Library button on the Launcher. 

3 Drag an item from the Library palette to the Document window, or select an 
item and click Insert. 

To insert the item’s content without creating an instance of the item in the 
document, press Control (Windows) or Option (Macintosh) while dragging an 
item out of the Library palette. 
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Making changes to a library item 

Editing a library item changes the original item file. Dreamweaver lets you 
choose to update the edited item in all documents in the current site, rename 
items to break their connection with documents or templates, and delete items 
from a library. 

Note: The CSS Style palette, Timeline inspector, and Behavior inspector are unavailable 
when you are editing a library item, because library items can contain only BODY elements. 
Timeline and CSS style sheet code is part of the HEAD section, and the Behavior inspector is 
unavailable because it inserts code into the HEAD as well as the BODY section. For 
instructions on editing behaviors, see "Editing a behavior in a library item" on page 373. 


To edit a library item: 

1 Choose Window > Library or click Library on the Launcher. 

2 Select a library item and click the Open icon (the folder icon) at the bottom of 
the palette, or double-click the item. 

Dreamweaver opens a new window for editing the library item. 

3 Edit the library item and then save your changes. 

4 In the dialog box that appears, choose whether to update the documents on the 
local site with the edited library item: 

• Choose Update to update all documents in the local site with the edited 
library item. 

• Choose Don’t Update to avoid changing any documents until you use 
Modify > Library > Update Current Page or Update Pages. 

To update pages that use an edited library item: 

1 Choose Modify > Library > Update Pages. 

2 In the dialog box that appears, choose the files that you want to update. 

• Choose Entire Site to update all documents on the specified site. 

• Choose Files That Use to update all documents that use the specified 
library item. 

3 Click Start. 

The content of the library item is replaced in the specified documents. 
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To rename a library item: 

1 Select a library item in the Library palette. 

2 Click inside the item name. 

3 Enter a new name. 

4 When you click OK, Dreamweaver asks if you want to update files that use 
the item. 

• If you click Yes, all documents that previously used the item will update their 
references to the new name. 

• If you click No, documents that have references to the item under its old name 
will not automatically update their references to the new name. 

To delete a library item from a library: 

1 Choose Window > Library or click the Library button on the Launcher. 

2 Select an item in the Library palette. 

3 Click the trash icon or press Delete. 

Deleting a library item removes the item from the library, but doesn’t change the 
content of any documents. 

Making library items editable in a document 

If you’ve added a library item to your document and you want to edit the item 
specifically for that page, you must break the link between the item in the 
document and the library. Once you’ve made an instance of a library item 
editable, that instance cannot be updated from the library. 

To make a library item editable: 

1 Select a library item in the current document. 

2 Then do one of the following: 

• Click Detach from Original in the Property inspector 

• Choose Detach from Original in the context menu. 
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Editing a behavior in a library item 

When you create library items that contain elements with behaviors attached to 
them, Dreamweaver copies the element and its event handler (the attribute that 
specifies which event to look for and which action to call when the event occurs) 
to the library item file. Dreamweaver does not copy the associated JavaScript 
functions into the library item. Instead, Dreamweaver automatically inserts the 
functions into the HEAD section of the current document (if they do not already 
exist) when you add the library item to the document. 

The JavaScript functions are not stored with the library item because they are 
HEAD elements, and library items can only contain BODY elements. Thus the 
Behavior inspector is unavailable when you are editing a library item, because 
only half of the behavior code is available to inspect. To edit a behavior in a 
library item, you must first make the item editable and then re-create it after 
making changes. 

To edit a behavior in a library item: 

1 Open a document that contains the library item. 

Note the name of the library item, as well as the exact tags it contains. You’ll 
need this information in steps 8 and 9. 

2 Select the library item and click Detach from Original in the 
Property inspector. 

3 Select the element that has the behavior attached to it. 

4 Choose Window > Behaviors to open the Behavior inspector, and then double¬ 
click the action you want to change. 

5 In the dialog box that appears, make the necessary changes and click OK. 

6 Choose Window > Library to open the Library palette. 

7 Delete the original library item. 

8 In the Document window, select the elements that make up the library item. 

Be careful to select exactly the same elements that were in the original 
library item. 

9 In the Library palette, use the context menu to select Create Library Item, and 
give the new item the same name as the one you deleted in step 7. 

Be sure to use exactly the same spelling and capitalization. 

10 To update the library item in your site pages, do one of the following 

• Choose Modify > Library > Update Pages. 

• Use the context menu, then select Update Pages. 
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11 In the Update Pages dialog box, in the Look in pop-up menu, select 
Files That Use. 

The name of the library item you just created should appear in the adjacent 
pop-up menu. 

12 Select Update Library Items, and then click Start. 

13 Click Close to exit the Update Pages dialog box. 

Setting Library item properties 

Use library item properties to specify the source file of an item, to make it 
editable, or to re-create it after editing. To open the Property inspector, double¬ 
click a library item. 

Src displays the file name and location of the source file for the library item. 

Open opens the source file for the library item. 

Detach from Original breaks the link between the selected library item and its 
source file. When an item is detached it is no longer a library item and can be 
edited. You can also choose Detach from Original in the context menu to detach 
an item from the library. 

Recreate overwrites the original library item with the current selection. Use this 
option to re-create library items if the library file isn’t present, if the item’s name 
has been changed, or if the item has been edited. 


Using the Library palette 

The Library palette displays all of the items in the library file for the current 

local site. 

To display the Library palette: 

• Choose Window > Library. 

To add a library item to a document, do one of the following: 

• Select and drag an item from the Library palette list to the document 

• Select an item in the Library palette list, then choose Add to Page from the 
context menu. 

To open a Library item: 

• In the Library palette list, right-click (Windows) or Control-click (Macintosh) 
the library item you want to open, and choose Open from the context menu. 

• In the Library palette list, double-click the item you want to open. 

• Select the item in the Library palette list, then click the Open Library Item icon 
(the folder icon at the bottom of the palette) to make changes to the item. 
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Library palette options 

These commands are available in the Library palette context menu. 

Create Library Item (document icon) adds the current selection in the Document 
window to the library as a new item. 

Delete (trash can icon) removes the selected item from the library. 

Rename renames the selected item. 

Open (folder icon) opens the selected item in a new window for editing. 

Add to Page places the selected library item on the page at the insertion point. 
There is no icon for this command; you can select it from the context menu. 

Select In Site Window selects the highlighted item in the Document window. 

Update Pages opens the Update Pages dialog box, which allows you to update 
your site or files that use the library item. 


Using server-side includes 

Server-side includes are instructions to the server to include the specified file in 
the current document. Because the processing of includes happens on the server, 
included content does not normally appear when you open a document locally in 
a browser. Dreamweaver, however, does display server-side includes, both in the 
Document window and browser preview window. To display included content, 
Dreamweaver uses a translator to mimic the way a server would process the 
include instructions. 

Placing a server-side include in a document inserts only a reference to an external 
file. Dreamweaver displays the content of the external file in the Document 
window, making it easier to design pages, but you cannot edit this content directly 
in a document. To edit the content of a server-side include, you must directly edit 
the file that you’re including. Any changes to the external file are automatically 
reflected in every document that includes it. 

To insert a server-side include: 

1 Choose Insert > Server-Side Include or click the SSI button on the Common 
panel of the Object palette. 

2 In the dialog box that appears, click the folder icon to browse to a file, or type 
the path to the file you want to include. Then click OK. 
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Viewing server-side includes in Dreamweaver 

By default, Dreamweaver processes all nonconditional server-side includes and 
displays them in the Document window. 

To specify which files are processed or to turn off processing of server- 
side includes: 

1 Choose Edit > Preferences > Translation. 

2 Select Server-Side Includes from the list of translators. 

3 Select one of the following options for translating server-side includes: 

In All Files is the default setting; leave this turned on to see the content of 
included files displayed in the Document window. 

In No Files turns off all processing of server-side includes in Dreamweaver. 

In Files with Extensions causes Dreamweaver to process server-side includes 
only in files that end in ,stm, .html, .htm, .shtml, or .shtm. 

In Files Matching One of These Expressions causes Dreamweaver to scan the 
document for matches to the listed regular expressions; if any matches are 
found, Dreamweaver processes any server-side includes in the document. 


Editing a server-side include 

Like library items, server-side includes are selected as a whole unit in the 
Document window. Unlike library items, the HTML source code contained in an 
include does not appear in the HTML Source inspector. Instead, the actual server 
instruction appears, looking like this: 

<!—#include virtual = "/uber/html/footer.html" --> 

To edit the content associated with the included file, you must open the file. 

To edit a server-side include: 

1 Select the server-side include in either the Document window or the HTML 
Source inspector, and click Edit in the Property inspector. 

The included file opens in a new Document window. 

2 Edit the file; then save it. 

The changes are immediately reflected in the current document and in any 
subsequent document you open that includes the file. 
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Creating Forms 


Forms allow you to collect information from users. Common uses for forms 
include surveys, order forms, and search interfaces. 

Forms require two components: HTML source code describing the form, and 
either a server-side application or client-side script to process the information that 
users enter in the form fields created by the HTML. 

You can use Dreamweaver to create forms, to add objects to them, and (by using 
behaviors) to validate information entered by the user. You must use a text 
editor to write a script or application to process the form data. (Perl is the 
most common scripting language for form processing; C, Java, and even 
JavaScript are other options.) 

Your Dreamweaver forms can include standard objects such as text fields, buttons, 
image fields, checkboxes, radio buttons, list/menus, file fields, and hidden fields. 
Dreamweaver also supports input types that it doesn’t recognize by displaying 
generic field properties in the Property inspector. See “Generic field properties” in 
Dreamweaver Help. 
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Creating a form 

Use either the Insert > Form command or the Forms panel of the Object palette to 
create a form. 

To create a form: 

1 Do one of the following: 

• Place the insertion point where you want the form to appear, and choose 
Insert > Form. 

• Place the insertion point where you want the form to appear, and click the 
Form button on the Forms panel of the Object palette. 

• Drag the Form button to the desired location on the page. 

If there is no visible result, check that View > Invisible Elements is on. 

2 Select the form and set form properties in the Property inspector. Choose from 
the following options: 

Form Name assigns a name to the form. Naming a form makes it possible to 
control it with a scripting language, such as JavaScript or VBScript. 

Action identifies the server-side application that processes the form 
information, specified as a URL. Click the folder icon to locate the application, 
or enter the application’s path. 

Method defines how the form data is handled. 

3 In the Property inspector, choose one of the following methods to define how 
the form data is handled: 

Get appends form values to the URL and sends the server a GET request. 
Because URLs are limited to 8192 characters, don’t use the GET method with 
long forms. 

Post sends the form values in the body of a message and sends the server a 
POST request. 

Default uses the browser’s default method (generally GET). 


Adding an object to a form 

Once you add an object to a form, you can set its properties using the 
Property inspector. 
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To add an object to a form: 

1 Do one of the following: 

• Place the insertion point inside the form boundary, and choose an object from 
the Insert > Form Object menu. 

• Place the insertion point inside the form boundary, and click an object button 
on the Forms panel of the Object palette. 

• Drag an object button to the desired location inside the form boundary. 

2 Specify the properties for the object in the Property inspector (choose 
Window > Properties to display the Property inspector if it is not 
already open). 

Text fields accept any type of text, alphabetic or numeric. The entered text 
can be displayed as a single line, as multiple lines, or as bullets or asterisks 
(for password protection). See “Text field properties” in Dreamweaver Help. 

Buttons perform tasks when clicked, such as submitting or resetting forms. You 
can enter a custom label for a button, or use one of the predefined labels. See 
“Button properties” in Dreamweaver Help. 

Image fields can be used in place of Submit buttons. See “Image field 
properties” in Dreamweaver Help. 

Checkboxes allow multiple responses in a single group of options. See 
“Checkbox properties” in Dreamweaver Help. 

Radio buttons represent exclusive choices. Selecting a button within a group 
deselects all others in the group. See “Radio button properties” in 
Dreamweaver Help. 

List/menus present a set of values from which users can choose. The object can 
present a pop-up menu, which appears only when the user clicks the object’s 
name (and which accepts only a single choice), or a list box, which always 
displays the values in a scrolling list (and which accepts more than one choice). 
See “List/Menu properties” in Dreamweaver Help. 

File fields let users browse to files on their hard disks and upload them as form 
data. See “File field properties” in Dreamweaver Help. 

Hidden fields let you store information (such as the recipient of form data or 
the subject of the form) that is not relevant to the user but that will be used by 
the application that processes the form. See “Hidden field properties” in 
Dreamweaver Help. 

Jump Menu lets you insert a menu in which each option links to a document or 
file. See “Creating jump menus” on page 122. 

3 Type a label or descriptive text, if desired, next to the object. 

You can apply text formatting to form object labels. For more information, see 
“Changing font characteristics” on page 179. 
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Processing forms 

Forms are processed by the script or application specified in the ACTION attribute 
of the FORM tag. Select a form and look in the Property inspector to see what the 
associated action is. 

The simplest forms use JavaScript or VBScript to perform all form processing on 
the client side (as opposed to sending the form data to the server for processing). 
For example, you might have a small form at the bottom of a page that contains 
only two radio buttons labeled Yes and No, plus a Submit button. The form 
action might be a JavaScript function defined in the HEAD section of the 
document that displays one alert if the user selects Yes and another alert if the 
user selects No: 

function processForm(){ 
if (document.forms[0].elements[0].checked)) 
alert(Yes'); 

}else{ 

alert('No'); 

} 

} 

To use a client-side JavaScript function as the form action: 

1 Select a Submit button in a form. 

2 Attach the Call JavaScript behavior to the button. (See “Call JavaScript” on 
page 306.) 

3 In the JavaScript text box that appears while attaching the behavior, enter 
processForm(). 

4 Add a processForm() JavaScript function (like the one shown above) to the 
HEAD section of your document. 

You can handle many form-processing tasks using client-side scripting, but you 
can’t save the data entered by the user or send it to someone else. For such 
purposes you need a server-side application such as a Common Gateway Interface 
(CGI) script. CGI scripts can be written in Perl, C, Java, or other programming 
languages. There are several sites on the Web that offer free CGI scripts that you 
can use, and you can modify those scripts to fit your needs. See “HTML and Web 
technologies resources” on page 19. You can also ask your Internet service provider 
or Web team if there are any available CGI scripts that are already configured to 
run on your server. 

For an introduction to CGI scripting, see the CGI resources listed in “HTML and 
Web technologies resources” on page 19. 
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Using behaviors with forms 

You can attach behaviors to forms and form objects by using any of the behaviors 
that appear in the Behavior inspector when the form or form object is selected. 
The Validate Form and Set Text of Text Field behaviors are available only if a text 
field has been inserted into the document. When attaching the Validate Form 
behavior to an form object, you must specify which text field is to be validated. 
For example, if you attach Validate Form to the Submit button, you might specify 
a text field created for “Name.” 

When applying behaviors, you need to make sure that every form object in your 
document (and every other object) has a unique name. If you use the same name 
for two different objects, behaviors may not work properly—even if the objects 
are in different forms. 

Note that unique form object names (in different forms on the same page) were 
not required in Dreamweaver 2; if you have pages you created in Dreamweaver 2 
that include multiple form objects with the same name, you need to change the 
names before you associate behaviors with them. 

Two other object-naming guidelines: 

• Names of form objects (and other objects) must start with a letter (as opposed 
to a numeral). 

• Don’t use JavaScript reserved words (such as top or navigator) as object names. 

The two form-specific behaviors are explained below. For information on other 
behaviors, see “Using Behaviors” on page 297. 

Validate Form checks the contents of specified text fields to ensure that the user 
has entered the correct type of data. See “Validate Form” on page 331. 

Set Text of Text Field replaces the content of a specified text field with the content 
you specify. See “Set Text of Text Field” on page 325. 


Creating Forms 381 



382 Chapter 15 



CHAPTER 16 

Customizing Dreamweaver 


Dreamweaver can be customized in many ways, allowing you to work in a manner 

that’s familiar, comfortable, and efficient for you. 

The following are some of the ways you can customize Dreamweaver: 

• Rearrange the objects in the Object palette so that the ones you use most often 
are always visible, create new panels to reorganize the objects, or add new 
objects. See “Changing the Object palette” on page 384. 

• Change the keyboard shortcuts or names of menu items, add new commands 
to menus, and remove existing commands from menus. See “Customizing 
Dreamweaver menus” on page 386. 

• Edit the source formatting profile to gain even finer control over the HTML 
that Dreamweaver creates. The SourceFormat.txt file includes all the settings 
from the HTML Format preferences and more. See “Editing the HTML 
source formatting profile” on page 392. 

• Create your own commands and floating palettes using JavaScript. See 
“Extending Dreamweaver: Basics” on page 398. 

• Change how third-party tags (such as ASP and ColdFusion tags) appear in the 
Document window. See “Customizing the interpretation and appearance of 
third-party tags” on page 399. 

• Set preferences for everything from color schemes and highlighting to site 
configurations and browsers. See “Setting preferences” on page 73. 
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Changing the Object palette 

By default, the Object palette is divided into six panels: Characters, Common, 
Forms, Frames, Head, and Invisibles For information on the objects in these 
panels, see “Using the Object palette” on page 69. The panels correspond to 
folders in the Configuration/Objects folder within the Dreamweaver 
application folder. 

For each object on a panel of the Object palette, there are two or three files in the 
corresponding folder: 

• A GIF file containing an icon for the object 

• An HTML file containing either the HTML to be inserted into your file or an 
HTML form that lets you specify data to be inserted (such as the text of a 
comment) 

• A JavaScript file (optional) that generates the HTML to be inserted into 
your file 

You can move objects from one panel to another, rename panels, and remove 
objects from the palette altogether. Once you’ve made changes, you can reload 
extensions to make the changes appear in the Object palette. 

To move an object from one Object palette panel to another: 

Move the object’s HTML and GIF files (and the JavaScript file, if any) from one 
folder to another within the Configuration/Objects folder. Be sure to move all of 
the object’s files. 

To rename a panel on the Object palette: 

Rename the corresponding folder in the Configuration/Objects folder. 


To remove an object from the Object palette: 

Move the object’s HTML, GIF, and JavaScript files out of the Configuration/ 
Objects folder. 

To reload extensions after making a change inside the Configuration/ 

Objects folder: 

1 Control-click (Windows) or Option-click (Macintosh) the pop-up menu at the 
top of the Object palette. 

2 Choose Reload Extensions. 
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Creating a simple object 

Many simple objects require no JavaScript; they contain only the HTML that is 
to be inserted into the document. For basic information about creating more 
complex objects using JavaScript, see “Extending Dreamweaver: Basics” on 
page 398. 

To create a simple object: 

1 Create a new blank document in a text editor (such as BBEdit or HomeSite). 

You can use Dreamweaver’s HTML Source inspector as your text editor, but 
first you must delete all the tags that appear in the HTML Source inspector 
when you create a new document. 

2 Type or paste in the tags that you want this object to insert into 
your documents. 

For example, type: 

<P> 

&copy; 2000 DCD Productions, lnc.<BR> 

All Rights Reserved 

</P> 

3 Save the file. 

If you want the new object to appear on one of the existing Object palette 
panels, save it in one of the Objects folders (Characters, Common, Forms, 
Frames, Head, or Invisibles). To create a new panel, create a new folder within 
the Configuration/Objects folder and save your file there. Additional folders 
inside any panel subfolder (such as folders created inside the Characters 
subfolder) are ignored. 

4 In a graphics or image-editing application (such as Macromedia Fireworks), 
create an 18 x 18 pixel GIF image that will serve as the icon for your object in 
the Object palette. 

If you create a larger image, Dreamweaver automatically scales it to 18 x 18 
pixels. If you do not create an icon for your object, Dreamweaver inserts a 
generic object icon in the Object palette. 

5 Give your icon the same file name as your object file and save the icon in the 
same directory as the object file. 

For example, if your object is called Copyright_DCD.htm and you saved it in 
the Common directory, name your icon Copyright_DCD.gif and save it in the 
Common directory as well. 

6 Relaunch Dreamweaver to use your new object. The object appears at the 
bottom of the Insert menu as well as on the Object palette. 
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Changing the default file type 

By default, Dreamweaver shows all the file types it recognizes in the File > Open 
dialog box. You can use a pop-up menu in that dialog box to limit the display to 
certain types of files. If most of your work involves a specific file type (such as ASP 
files), you can change the default display. 

To change Dreamweaver's default File > Open file type: 

1 Make a backup copy of the Extensions.txt file in the Configuration folder, in 
case you want to restore the defaults later. 

2 Open Extensions.txt in a text editor. (Don’t open it in Dreamweaver.) 

3 Cut the line corresponding to the new default and paste it as the first line of the 
file. Then save the file and relaunch Dreamweaver to see the new default. 

To add new file types to the menu in the File > Open dialog box: 

1 Make a backup copy of the Extensions.txt file in the Configuration folder, in 
case you want to restore the defaults later. 

2 Open Extensions.txt in a text editor. (Don’t open it in Dreamweaver.) 

3 Add a new line to the file for each new file type. In capital letters, enter the file 
name extensions that the new file type can have, separated by commas; then 
add a colon and a brief descriptive phrase to show in the File > Open menu. 
For example, for JPEG files, enter 

JPG,JPEG,JFIFJPEG Image Files 

4 Save the file and relaunch Dreamweaver to see the changes. 

Customizing Dreamweaver menus 

Dreamweaver creates all of its menus from the structure defined in an XML file 
called menus.xml, in the Configuration/Menus subfolder of the Dreamweaver 
application folder. Editing the menus.xml file changes Dreamweaver’s menus the 
next time you launch Dreamweaver. (For basic information about XML, see 
“About XML” on page 368.) 

By editing the menus.xml file, you can add, change, and remove keyboard 
shortcuts for menu items. You can also rearrange, rename, and remove 
menu items. 

Note: Always make a backup copy of the current menus.xml file, or any other Dreamweaver 
configuration file, before you modify it. It's easy to make mistakes in editing the menu 
configuration file, and there's no way from within the Dreamweaver application to revert to 
a previous set of menus. The Configuration folder does, however, contain a backup of the 
default menus.xml file, called menus.bak; to revert to the default menu set, replace 
menus.xml with a copy of menus.bak. 
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Editing the Commands menu 

You can add certain kinds of commands to the Commands menu, and change 
their names, without editing the menus.xml file. 

To create new commands that are automatically placed in the Commands 
menu, use the History palette (see “Creating new commands from history steps” 
on page 102). 

To change the names of commands you’ve created, or to delete them from the 
Commands menu, choose Commands > Edit Command List. (Note that when 
you delete a command from the menu using this method, the file containing the 
command is deleted as well.) 

Note: To reorder the items in the Commands menu, or to move items between 
menus, you must edit the menus.xml file. The term "command" has two meanings in 
Dreamweaver. Strictly speaking, from an extension developer's viewpoint, a command is a 
particular kind of extension. In some contexts, however, "command" is used 
interchangeably with "menu item" to mean any item that appears in a Dreamweaver menu, 
no matter what it does or how it's implemented. 


About menu syntax 

Be careful when making changes to the menus. Dreamweaver ignores any menu 
or menu item that contains an XML syntax error. 

The menus.xml file contains a structured list of menu bars, menus, and menu 
items. A menu bar (tagged with opening and closing MENUBAR tags) is a discrete 
menu or set of menus—for example, there’s a main menu bar, a separate Site 
window menu bar (for Windows only), and a menu bar for each context menu. 
Each menu bar contains one or more menus; a menu is surrounded by <MENU> 
and </MENU> tags. Each menu contains one or more menu items, each described 
by a MENUITEM tag and its attributes. (A menu can also contain separators and 
submenus.) For example, the following is part of the definition of the main 
(Document window) menu bar: 

<menubar name="Main Window" id="DWMainWindow"> 

<menu name="_File“ id = "DWMenu_File"> 

<menuitem name="_New" key="Cmd + N" enabled=“true" 
command="dw.createDocument()" /> 

...other menu items, separators, and submenus here... 

</menu> 

...other menus here... 

</menubar> 


Customizing Dreamweaver 387 



Rearranging menus 

You can move menu items within a menu or from one menu to another, change 
the order of the menus within a menu bar, and add separators to menus or remove 
them from menus. 

Note that you can move items into or out of context menus using the same 
procedure as for other menus. 

To move a menu item: 

1 Quit Dreamweaver. 

2 Make a backup copy of the menus.xml file. 

3 Open menus.xml in a text editor such as BBEdit, HomeSite, or Wordpad 
(don’t open it in Dreamweaver). 

4 Cut an entire MENUITEM tag, from the <menuitem at the beginning to the/> 
at the end. 

5 Place the insertion point at a new location. 

6 Paste the menu item into its new location. (Make sure it’s between a <MENU> 
tag and the corresponding </MENU> tag.) 

To create submenus, nest a matched opening and closing pair of MENU tags within 
a menu. That is, insert a new <MENUx/MENU> pair into a menu, then add new 
menu items between those tags. 

To insert a separator between two menu items: 

Enter <SEPARATOR /> between the two MENUITEM tags. 

To remove an existing separator, delete the corresponding <SEPARATOR/> line. 


About menu item syntax 

The following are the attributes of the MENUITEM tag: 

NAME is the menu item name that appears in the menu. (An underscore indicates 
that the following letter is the command’s mnemonic (Windows only).) Required. 

ID is used by Dreamweaver to identify the item. The ID must be unique 
throughout the menu structure. If you add new menu items to menus.xml, use 
your company name or another unique string as a prefix for each menu item’s ID, 
to ensure uniqueness. Required. 
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KEY is the keyboard shortcut for the command, if any. Use the following strings to 
specify modifier keys: 

• Cmd specifies the Control key (Windows) or Command key (Macintosh). 

• Alt and Opt interchangeably specify the Alt key (Windows) or Option 
key (Mac). 

• Shift specifies the Shift key on both platforms. 

• Ctrl specifies the Control key on both platforms. 

• A plus (+) sign separates modifier keys if a given shortcut uses more than one 
modifier. For example, Cmd + Opt+5 in the KEY attribute means the menu item is 
executed by pressing Control+Alt+5 (Windows) or Command+Option+5 
(Macintosh). 

• Special keys are specified by name: FI through FI2, PgDn, PgUp, Home, End, 
Ins, Del, Tab, Esc, BkSp, and Space. Modifier keys can also be applied to 
special keys. 

PLATFORM indicates which platform the item appears on. Valid values are win, 
meaning Windows-only, or mac, meaning Macintosh-only. The default (if you 
don’t specify this attribute) is for the item to appear on both platforms. 

ENABLED is the name of a JavaScript function that determines whether the menu 
item is currently enabled. If the function returns false, the menu item is dimmed. 

COMMAND is a JavaScript expression that’s executed when the user selects this 
item from the menu. For complex JavaScript code, use a JavaScript file (specified 
with the FILE attribute) instead. Either FILE or COMMAND must be specified for each 
menu item. 

FILE is the name of an HTML file containing JavaScript that controls the menu 
item. The path specified in the FILE attribute is relative to the Configuration folder. 
Note that the FILE attribute overrides the COMMAND, ENABLED, and CFIECKED 
attributes. Either FILE or COMMAND must be specified for each menu item. For 
information on creating a command file using the History palette, see “Creating 
new commands from history steps” on page 102. For information on writing your 
own JavaScript commands from scratch, see Extending Dreamweaver. 

CHECKED is a JavaScript expression that indicates whether the menu item has a 
check mark next to it in the menu; if the expression evaluates as true, the item is 
displayed with a check mark. 

DYNAMIC if present, indicates that a menu item is to be determined dynamically, 
by an HTML file that contains JavaScript code to set the text and state of the 
menu item. If you specify a tag as DYNAMIC, you must also specify a FILE attribute. 
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Changing keyboard shortcuts 

If the default keyboard shortcuts aren’t convenient for you, you can change or 
remove existing shortcuts, or add new ones. 

To change a keyboard shortcut: 

1 Quit Dreamweaver. 

2 Make a backup copy of the menus.xml file. 

3 Open menus.xml in a text editor such as BBEdit, HomeSite, or Wordpad 
(don’t open it in Dreamweaver). 

4 Look at the “Keyboard Shortcut Matrix” on page 418 and find a shortcut that’s 
not being used, or one that you want to reassign. (If you reassign a keyboard 
shortcut, cross it off on a printed copy of the matrix for future reference.) 

5 If you’re reassigning a keyboard shortcut, find the menu item that the shortcut 
is assigned to, and remove the KEY="shortcuf attribute from that menu item. 

6 Find the menu item to assign the keyboard shortcut to. 

7 If the menu item already has a keyboard shortcut, find the key attribute on that 
line. If it doesn’t already have a shortcut, add KEY="" anywhere inside the 
MENUITEM tag. 

8 Between the double quotation marks of the KEY attribute, enter the new 
keyboard shortcut. 

Use a plus (+) sign between modifier keys, and between modifiers and letter 
keys. For more information about modifiers, see “About menu item syntax” on 
page 388. 

If the keyboard shortcut is in use elsewhere and you didn’t remove the other use 
of it, the shortcut will apply only to the first menu item it’s used for in 
menus.xml. 

Note: You can use the same keyboard shortcut for a Macintosh-only menu item and for a 
Windows-only menu item if you wish. 

9 Write your new shortcut in the appropriate location in the Keyboard 
Shortcut Matrix. 
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Changing the name of a menu item 

You can easily change the name of any item on any menu. 

To change the name of a menu item: 

1 Quit Dreamweaver. 

2 Make a backup copy of the menus.xml file. 

3 Open menus.xml in a text editor such as HomeSite, BBEdit, or Wordpad 
(don’t open it in Dreamweaver). 

4 Find the appropriate MENUITEM tag, and change the value of its NAME attribute. 
Don’t change the item’s ID attribute. 


Customizing the appearance of dialog boxes 

The dialog box layouts for objects, commands, and behaviors are specified as 
HTML forms, in HTML files in the Configuration directory in the Dreamweaver 
application directory. You can edit those forms using Dreamweaver; see “Creating 
Forms” on page 377. 

To change the appearance of a dialog box: 

1 Find the appropriate .htm file in Configuration/Objects or Configuration/ 
Commands or Configuration/Behaviors. 

2 Make a copy of the file, somewhere other than the Configuration folder. 

3 Open the copy in Dreamweaver, edit the form, and save the copy. 

4 Quit Dreamweaver. 

5 Copy the changed copy back to the Configuration folder, in place of the 
original. (It’s a good idea to first make a backup of the original, so you can 
restore it later if you need to.) 

6 Launch Dreamweaver again to see the changes. 

You should change only the appearance of the dialog box, not how it works; it still 
must contain the same types of form elements, with the same names, so that the 
information that Dreamweaver obtains from the dialog box can still be used in the 
same way. 

For example, the Comment object takes text input from a text area in a dialog 
box, then uses a simple JavaScript function to turn that text into an HTML 
comment that inserts it into your document. The form that describes the dialog 
box is in Configuration/Objects/Invisibles/Comment.htm. You can open that file 
and change the size and other attributes of the text area, but if you remove the 
TEXTAREA tag entirely, or change the value of its NAME attribute, the Comment 
object will no longer work properly. 
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Editing the HTML source formatting profile 

The HTML source formatting profile determines how Dreamweaver formats the 
HTML source code for a document. The profile includes formatting preferences 
for individual tags and groups of tags, along with the HTML Format preferences 
(set with the Edit > Preferences command). You can edit the SourceFormat.txt file 
in a text editor for precise control over how Dreamweaver writes HTML. The 
profile is a text file saved in the Configuration folder within the Dreamweaver 
application folder. 

HTML Format preferences set with the Preferences command are saved in 
SourceFormat.txt when you quit Dreamweaver, and changes made to the profile 
do not take effect until you restart Dreamweaver. Thus, to ensure access to the 
new preference settings, quit the application before editing the profile. 

The HTML source formatting profile follows a specific format, which is outlined 
in the file. Note the following conventions: 

• Each section of the profile begins with <?keyword> (for example, <?OPTIONS>, 
<?ELEMENTS>, <?ATTRIBUTES>). 

• The parameters for each section are defined within HTML comments 
(<!—>) directly above the section. 

• The OMIT line in the <?OPTIONS> section is reserved for future use (it currently 
does not affect HTML source formatting). 

• An individual tag can be marked as belonging to an indentation group 
(IGROUP) in the <?ELEMENTS> section. By default, IGROUP 1 contains table rows 
and columns, and IGROUP 2 contains framesets and frames. These groupings 
correspond to the Indent Table Rows and Columns and Indent Framesets and 
Frames options in the HTML Format Preferences dialog box. Indentation can 
be turned off for the entire group by removing its number from the ACTIVE 
attribute in the <?OPTIONS> section. You can also add other tags to IGROUP 1 or 
2 so you can control them with the options in the HTML Format Preferences. 

For example, the default settings for the P tag in SourceFormat.txt are <P 
BREAK="1,0,0,1" INDENT>, which produces the following: 

<p> A paragraph of text that is indented from the left margin and that has a break 
before the opening P tag and after the closing P tag, but not after the opening P and 
not before the closing P.</p> 

<p>Next paragraph.</p> 
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If you change the settings to <P BREAK="1,1,1,2">, you will get this: 

<P> 

A paragraph of text that is not indented from the left margin and that has one break 
before and after the opening P tag, one break before the closing P tag, and two breaks 
after the closing P tag. 

</p> 

<P> 

Next paragraph. 

</p> 

Some tag and attribute settings include the terms NAMECASE or SAMECASE. 
NAMECASE specifies that the tag or attribute is to be capitalized in a particular way. 
For example, onClick is specified as conClick namecase="onClick">, indicating that it 
should always be capitalized in that specific way, neither all-uppercase nor all¬ 
lowercase. Dreamweaver uses SAMECASE to ensure that it uses the right case (upper 
or lower) when generating certain attributes; don’t remove SAMECASE from any of 
the attribute formatting specifications where it appears. 

Any attribute not specified in the SourceFormat.txt file uses the default formatting 
settings that you specify in the HTML Format preferences panel. 
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About browser profiles 

Browser profiles are the files to which your documents are compared when you 
run a target browser check (see “Checking a page for compatibility with target 
browsers” on page 167). Each profile contains information about the HTML tags 
and attributes that a particular browser supports. It can also contain warnings, 
error messages, and suggestions for tag substitutions. 

Browser profiles are stored in the Configuration/BrowserProfiles folder within the 
Dreamweaver application folder. You can edit existing profiles or create new ones 
with a text editor (such as BBEdit, HomeSite, Notepad, or SimpleText). It is not 
necessary to quit Dreamweaver before editing or creating browser profiles. 


About browser-profile formatting 

Browser profiles follow a specific format. To avoid parsing errors during target 

browser checks, follow these rules when editing or creating profiles: 

• The first line is reserved for the name of the profile. It must be followed by a 
single carriage return. The name on this line appears in the Target Browser 
Check dialog box and in the target check report. It must be unique. 

• The second line is reserved for the designator PROFILE_TYPE = BROWSER_PROFILE. 
Dreamweaver uses this line to determine which documents are browser profiles. 
It must not be changed or moved. 

• Two hyphens (-) at the beginning of a line indicate a comment (that is, that 
the line will be ignored during the target check process). 

• A space must appear in these places: before the closing angle bracket (>) on the 
!ELEMENT line, after the opening parentheses, before the closing parentheses, 
and before and after each pipe (|) in the value list. 

• An exclamation point without a space must appear before each of the 
following words: ELEMENT, ATTLIST, Error, msg, and htmlmsg (lELEMENT, IATTLIST, 

!Error, !msg, Ihtmlmsg). 

• !Error and IWarning may appear within the lELEMENT or the IATTLIST area. 

• I msg messages can contain only plain text. Ihtmlmsg messages can contain any 
valid HTML, including hyperlinks. 

• HTML comments (<!—>) cannot be listed as tags in browser profiles because 
they interfere with parsing. Dreamweaver does not report an error for 
comments because all browsers support them. 
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The syntax for a tag entry is 

<!ELEMENT htmITag NAME="tagName" > 

<!ATTLIST htmITag 

unsupportedAttrlbutel !Error !msg="The unsupportedAttrlbutel of the htmITag is not 
supported. Try using supportedAttributel for a similar effect." 
supportedAttribute 1 

supportedAttribute2(validValue1 \ validValue2 \ validValue3 ) 

unsupportedAttrlbute2\Error !htmlmsg="<b>Don l t ever use this unsupportedAttrlbute2 of 
the htmITag !!</b>" 

> 

where 

htmITag is the tag as it appears in an HTML document. 

tag Name is what the tag is called (for example, the HR tag is called “horizontal 
rule”). The NAME attribute is optional. If specified, tagName is used in the error 
message; if a name is not supplied, htmITag is used. 

unsupportedAttrlbute is an attribute that is not supported. Any tags or attributes not 
specifically mentioned are assumed to be unsupported. Specify unsupported tags 
or attributes only when you want to create a custom error message. 

supportedAttribute is an attribute that is supported by htmITag. Only tags listed 
without an ! Error designation are considered supported by the browser. 

validValue is a value that is supported by the attribute. 

The following example shows an entry for the APPLET tag that would be accurate 
for Navigator 3.0: 

<!ELEMENT APPLET Name="Java Applet" > 

<!ATTLIST APPLET 

Align (top | middle | bottom | left | right | absmiddle | absbottom | baseline | texttop) 
Alt 

Archive 

ClassIWarning !htmlmsg = "This browser ignores the <CODE>CLASS</CODE> attribute 
for the <CODE>APPLET</CODE> tag." 

Code 

Codebase 

Height 

HSpace 

ID iWarning !htmlmsg="This browser ignores the <CODE>ID</CODE> attribute for 
the <CODE>APPLET</CODE> tag. Use <CODE>NAME</CODE> instead." 

Name 

StyleiWarning !htmlmsg="This browser ignores the <CODE>STYLE</CODE> attribute 
for the <CODE>APPLET</CODE> tag." 

VSpace 

Width 

> 
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Creating a browser profile 

Create a browser profile by modifying an existing profile. For example, to create a 
profile for Netscape Navigator 5.0, you can open the profile for Navigator 4.0, 
add any new tags or attributes introduced in version 5.0, and save the profile as a 
profile for Netscape Navigator 5.0. 

To create a browser profile: 

1 Using a text editor, open the profile that most closely resembles the profile you 
intend to create, or open the profile that you want to change. 

2 Change the name of the profile. 

The name of the profile appears on the first line. Two profiles cannot have the 
same name. 

3 Add any new tags or attributes you know to be supported by the browser 
according to the syntax shown in “About browser-profile formatting” on 
page 394. 

If you don’t want to receive error messages about a certain unsupported tag, 
add it to the list of supported tags. If you include unsupported tags in the list of 
supported tags, save the profile in a separate file with a new name (such as 
Browsername x.x limited). Renaming the profile preserves the original profile 
with only the tags that are truly supported. 

4 Delete any tags or attributes that are not supported by the browser. 

This step is probably unnecessary if you are creating a profile for the next 
version of Netscape Navigator or Microsoft Internet Explorer, because browsers 
rarely drop support for tags. 
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5 Add any custom error messages according to the syntax shown in “About 
browser-profile formatting” on page 394. 

The profiles that come with Dreamweaver list all supported tags; they may also 
include commented-out lines with some commonly used but unsupported 
tags. To add a custom error message, remove the two hyphens at the beginning 
of the line and add either !msg "message" or Ihtmlmsg "<tag> message </tag>" after 
the ! Error. For example, this notation could appear in the Netscape Navigator 
3.0 profile: 

<!ELEMENT HR name="Horizontal Rule" > 

< IATTLIST HR 

- COLOR ! Error 

> 

To add a custom error message, remove the hyphens and add your message, 
preceded by !msg: 

<!ELEMENT HR name="Horizontal Rule" > 

< IATTLIST HR 

COLOR I Error Imsg "Internet Explorer 3.0 supports COLOR in horizontal rules, but 
Netscape Navigator 3.0 does not." 

> 

6 You can use ! Error for all error situations, or you can use ! Warning to indicate 
that a tag will be ignored but will not actually cause an error. 
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Extending Dreamweaver: Basics 

Dreamweaver is designed to be extensible. It includes a JavaScript interpreter, so it 
can read and execute JavaScript code, and it provides an application programming 
interface (API), a large set of JavaScript functions that allow developers to extend 
the capabilities of Dreamweaver. Dreamweaver also provides a Document Object 
Model (DOM), which allows extensions to examine and modify a document’s 
structure and contents. 

Using the JavaScript API, you can create objects, behavior actions, commands, 
Property inspectors, floating palettes, and data translators (all of which are 
collectively called extensions). 

You can also create new objects and new simple commands without knowing 
anything about programming; see “Changing the Object palette” on page 384 
and “Creating new commands from history steps” on page 102 for details. But for 
more advanced purposes, to add capabilities to Dreamweaver you must write 
extensions, either in JavaScript or in C. For information about the DOM and the 
API, see Extending Dreamiveaver. 

About JavaScript 

JavaScript is an interpreted programming language. To learn more about 
JavaScript, read a good JavaScript book, such as JavaScript Bible by Danny 
Goodman (IDG) or JavaScript: The Definitive Guide by David Flanagan 
(O’Reilly). For information on extending Dreamweaver using JavaScript, see 
Extending Dreamweaver. 

Note: Despite the resemblance between the two names, JavaScript is not related to Java in 
any way. 


Editing Dreamweaver commands 

All the commands in Dreamweaver menus, including those you create and save 
using the History palette (see “Creating new commands from history steps” on 
page 102), are implemented in JavaScript. This JavaScript code usually consists 
mostly of calls to functions provided by the Dreamweaver extensibility API. If you 
know JavaScript and understand the Dreamweaver extensibility API, you can edit 
the JavaScript to change the operation of Dreamweaver commands. 

Note: Don't attempt to change any JavaScript code unless you're certain you know what 
you're doing. 

To rename a command, move a command to a different menu, or add a keyboard 
shortcut to a command, see “Customizing Dreamweaver menus” on page 386. 
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Customizing the interpretation and 
appearance of third-party tags 

Server-side processing technologies such as ASP, PHP, ColdFusion, and JSP use 
special non-HTML code in HTML files; servers create and serve HTML content 
based on that code. When Dreamweaver encounters non-HTML tags, it 
compares them with information in its third-party tag files, which define how 
Dreamweaver reads and displays non-HTML tags. 

For example, ASP (Active Server Pages) files contain code for the server to 
interpret. This code is set off by a pair of delimiters: it begins with the string <% 
and ends with the string %>. Dreamweaver’s Configuration/ThirdPartyTags 
folder contains a file named ASP.xml, which describes the format of ASP code and 
defines how Dreamweaver displays that code. Because of the way ASP code is 
specified in ASP.xml, Dreamweaver doesn’t try to interpret anything between the 
starting and ending delimiters. 

You can define your own tags and create tag database files to define how 
Dreamweaver reads and displays them. Creating tag database files is particularly 
useful if you’re using a server-side markup system other than ASP, ColdFusion, or 
PHP; create a new tag database file for each such markup system, to tell 
Dreamweaver how to display the tags. 

Note: This section explains how to define the appearance of a custom tag within 
Dreamweaver, but not how to edit the content or properties of a custom tag. For 
information on how to create a Property inspector to inspect and change the properties of a 
custom tag, see "Property Inspectors" in Extending Dreamweaver. 

Each tag database file defines the name, type, content model, rendering scheme, 
and icon for one or more custom tags. You can create any number of tag 
database files, but all of them must reside in the Configuration/ThirdPartyTags 
folder to be read and processed by Dreamweaver. Tag database files have the file 
extension .xml. 

If you are working on several different unrelated sites at once (for example, as a 
freelance developer), put all the tag specifications for a particular site in one file. 
Then simply include that tag database file with the custom icons and Property 
inspectors that you hand over to the people who will maintain the site. 

You define a tag specification with an XML tag called TAGSPEC; for example, the 
following code describes the specification for the PIAPPY tag: 

<TAGSPEC TAG_NAME = "happy" TAGJYPE="nonempty" RENDER_CONTE NTS="fa Ise" 
CONTENT_MODEL="marker_model" ICON = “happy.gif IC0N_WIDTH="18” 

ICON HEIGEiT="18"></TAGSPEC> 
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There are two different kinds of tags defined using TAGSPEC: normal HTML-style 
tags, and string-delimited tags, which start with one string and end with another 
string. String-delimited tags are like empty HTML tags (such as IMG) in that they 
don’t surround content and don’t have closing tags. The HAPPY tag shown above is 
a normal HTML-style tag; it starts with an opening <HAPPY> tag, surrounds 
content, and ends with a closing </HAPPY> tag. An ASP tag, which starts with the 
string <% and ends with the string %>, is a string-delimited tag. 

The following table describes TAGSPEC’s attributes and their possible values: 


Attribute Value Description 


TAG NAME 


TAG TYPE* 


tagName 


empty or 
nonempty 


The name of the custom tag. Required. (For 
string-delimited tags, TAG_NAME is used only 
to determine whether a given Property 
inspector can be used for the tag. If the first 
line of the Property inspector contains this tag 
name with an asterisk on each side, then the 
inspector can be used for tags of this type. For 
example, the TAG_NAME for ASP code is ASP; 
Property inspectors that can examine ASP code 
should have *ASP* on the first line. For 
information on the Property inspector API, see 
"Property Inspectors" in Extending 
Dreamweaver.) 

Determines whether the tag itself is the 
content (as with IMG), or whether it surrounds 
content (as with CODE). Required for normal 
(non-string-delimited) tags. 


RENDER CONTENTS* TRUE or FALSE Determines whether the contents of the tag 

should appear in the document window, or 
whether the icon appears instead. Required 
for nonempty tags. Applies only to tags that 
appear outside of attributes. 
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Attribute 


Value 


Description 


CONTENT MODEL* 


START STRING 


END STRING 


DETECT IN ATTRIBUTE 


block model. Describes both what content the tag can 
head model, contain and what the tag can be contained by. 
marker_model, Required. 

or scriptjriodel block_model specifies that the tag can contain 
block-level elements such as DIV and P, and 
that the tag can appear only in the BODY 
section or inside other body-content tags such 
as DIV, LAYER, or TD. 

head_model specifies that the tag can contain 
text content, and that it can appear only in the 
HEAD section. 

markermodel specifies that the tag can 
contain any valid HTML code, and that it can 
appear anywhere. (Because adding text 
outside of a valid HEAD element creates invalid 
HTML, you must use head model instead of 
marker model if you want to place a custom 
tag containing text in the HEAD section.) 

Use marker model for tags that should be 
displayed inline (inside a block-level element 
such as P or DIV) rather than causing a 
line break. 

script_model allows the tag to exist anywhere 
between the opening and closing HTML tags 
of a document. When Dreamweaver 
encounters a tag with this model, it ignores all 
of the tag's content. Used for third-party 
markup (like certain ColdFusion tags) that 
Dreamweaver shouldn't parse. 


beginningOfTag Specifies a delimiter that marks the beginning 
of a string-delimited tag. String-delimited tags 
can appear anywhere in the document where 
a comment can appear. Dreamweaver 
performs no tag parsing and no entity or URL 
decoding between START STRING and 
END STRING. Required if END STRING is 
specified. 


endOfTag Specifies a delimiter that marks the end of a 

string-delimited tag. Required if START STRING 
is specified. 


TRUE or FALSE Indicates whether to ignore everything 

between START STRING and END_STRING (or 
between opening and closing tags if those 
strings aren't defined) even when those strings 
appear inside attribute names or values. You 
should generally set this to TRUE for string- 
delimited tags; the default is FALSE. 
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Attribute 

Value 

Description 

PARSE 

^ATTRIBUTES* 

TRUE or FALSE 

Indicates whether to parse the attributes of 
the tag. If this is set to TRUE (the default), 
Dreamweaver parses the attributes; if it's set 
to FALSE, Dreamweaver ignores everything 
until the next closing angle bracket that 
appears outside of quotation marks. For 
example, this attribute should be set to FALSE 
for a tag like CFIF (as in ccfif a is 1 >). 

ICON 


URL 

Specifies the path and file name of the icon 
associated with the tag. Required for empty 
tags, and for nonempty tags whose contents 
are not displayed in the Document window. 

ICON_ 

WIDTH 

widthlnPixels 

Specifies the width of the icon. 

ICON_ 

HEIGHT 

heightlnPixels 

Specifies the height of the icon. 


^Ignored that tags that use START_STRING and END_STRING 
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How custom tags appear in the Document window 

How custom tags appear in the Document window depends on the values of the 
TAG TYPE and RENDER_CONTENTS attributes of the TAGSPEC tag. If the value of 
TAG TYPE is empty, the icon specified in the ICON attribute appears. If the value of 
TAG__TYPE is nonempty but the value of RENDER_CONTENTS is FALSE, the icon appears 
as it would for an empty tag. For example, the HAPPY tag defined above might 
appear in the HTML like this: 

<P>This is a paragraph that includes an instance of the <CODE>HAPPY</CODE> tag 
(<HAPPY>Joe</HAPPY>).</P> 

and in the Document window like this: 


=|Es happudoc (a»ocado8/happn.html) tu 

jrhis is a paragraph that includes an instance of the 
HflPPViag(«). 


271 X 186 la 


For nonempty tags that have a RENDERJIONTENTS value of TRUE, the content 
between the opening and closing tags (such as the text between the tags in 
<MYTAG>this is the content between the opening and closing tags</MYTAG>) appears 
in the Document window instead of the icon. If View > Invisible Elements is 
enabled, the content is highlighted using the Third-Party Tags color specified in 
Highlighting preferences. (Note that highlighting applies only to tags defined in 
tag database files.) 

To change the highlighting color of third-party tags: 

1 Choose Edit > Preferences. 

2 Select Highlighting from the Category list. 

3 Click the Third-Party Tags color box to bring up the color palette. 

4 Choose a color, then click OK to exit the Preferences dialog box. 

About ASP 

Microsoft’s ASP (Active Server Pages) is a way to combine HTML, scripts written 
in JavaScript or VBScript, and ActiveX controls to dynamically serve HTML. 
When a browser requests an ASP page from a Microsoft Web server, the server 
interprets the ASP code and sends the resulting HTML to the requesting browser. 
For more information on ASP, see Microsoft’s ASP overview pages, as described in 
“HTML and Web technologies resources” on page 19. 

A block of ASP code begins with <% and ends with %>. If View > Invisible 
Elements is selected, Dreamweaver displays an ASP icon in the Document 
window to mark the location of ASP code. 
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About JSP 


Sun’s JSP (JavaServer Pages) provides a Java-based way to dynamically serve 
HTML and other Web content. When a browser requests a JSP page from a JSP- 
enabled server, the server interprets the JSP code and sends the resulting HTML 
to the requesting browser. For more information on JSP, see Sun’s JSP page, as 
described in “HTML and Web technologies resources” on page 19. 

A block of JSP code begins with <% and ends with %>. 

About PHP 

PHP (which stands for PHP: Hypertext Preprocessor) is a server-side scripting 
language. When a browser requests a PHP page from a PHP-enabled server, the 
server interprets the PHP code and sends the resulting HTML to the requesting 
browser. For more information on PHP, see the PHP pages, as described in 
“HTML and Web technologies resources” on page 19. 

A block of PHP code begins with <? and ends with ?>. IfView > Invisible 
Elements is selected, Dreamweaver displays a PHP icon in the Document window 
to mark the location of PHP code. 


About ColdFusion 

ColdFusion™ is another way to dynamically serve pages. When a browser 
requests a ColdFusion page from a server, the server passes the page to the 
ColdFusion Server software, which interprets the scripts on the page and sends the 
resulting HTML to the requesting browser. For more information on ColdFusion, 
see the ColdFusion product page, as described in “HTML and Web technologies 
resources” on page 19. 

Dreamweaver recognizes about fifty ColdFusion tags; see the ColdFusion.xml file 
in the Configuration/ThirdPartyTags folder for details. IfView > Invisible 
Elements is selected, Dreamweaver displays a ColdFusion icon in the Document 
window to mark the location of ColdFusion tags for which RENDER_CONTENTS is 
set to FALSE (in ColdFusion.xml). 
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Avoiding rewriting third-party tags 

Dreamweaver corrects certain kinds of errors in HTML; for information on 
exactly what it corrects, see “Setting HTML Rewriting preferences” on page 343. 
By default, Dreamweaver refrains from changing HTML in files with certain file 
name extensions, including .asp (ASP), .cfm (ColdFusion), and .php (PHP). This 
default is set so that Dreamweaver won’t accidentally modify the code contained 
in any such third-party tags. You can change Dreamweaver’s default rewriting 
behavior so that it rewrites HTML when it opens such files, and you can add 
other file types to the list of types that Dreamweaver doesn’t rewrite. 

Dreamweaver also encodes certain special characters when you enter them in the 
Property inspector. It’s often a good idea to allow Dreamweaver to perform this 
encoding; it makes special characters more likely to be displayed correctly across 
platforms and browsers. However, because such encoding may interfere with code 
contained in third-party tags, or even with the tags themselves, you may want to 
change Dreamweaver’s encoding behavior. 

To allow Dreamweaver to rewrite HTML in all files: 

1 Choose Edit > Preferences, and select the HTML Rewriting category. 

2 Do one of the following: 

• Delete one or more extensions from the list of extensions. 

• Deselect the Never Rewrite HTML: In Files with Extensions option. 

To add file types that Dreamweaver shouldn't rewrite: 

1 Choose Edit > Preferences, and select the HTML Rewriting category. 

2 Make sure the Never Rewrite HTML: In Files with Extensions option is 
selected, and add the new file extensions to the list in the text field. 

To turn off Dreamweaver's encoding options: 

1 Choose Edit > Preferences, and select the HTML Rewriting category. 

2 Deselect either or both Special Characters options. 

For information on the other HTML Rewriting preferences, see “Setting HTML 
Rewriting preferences” on page 343. 
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APPENDIX 


Keyboard Shortcuts 


File menu 

Action 

Windows 

Macintosh 

New document 

Control + Shift+N 

Command + N 

New window 

Control+ N 

n/a 

Open an HTML file 

Control + 0, or drag the 
file from the Explorer or 
Site window to the 
Document window 

Command + 0 

Open in frame 

Control + Shift+O 

Command + Shift+0 

Close 

Control+W 

Command+W 

Save 

Control+ S 

Command + S 

Save all 

Control + Shift+S 

Command + Shift+S 

Exit/Quit 

Control + Q 

Command + Q 
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Edit menu 


Action 

Windows 

Macintosh 

Undo 

Control+Z 

Command + Z 

Redo 

Control+Y or 

Control + Shift+Z 

Command+Y or 
Command + Shift+Z 

Cut 

Control+X 

Command+X 

Copy 

Control + C 

Command + C 

Paste 

Control+V 

Command+V 

Clear 

Delete 

Delete 

Select All 

Control + A 

Command+A 

Launch External Editor 

Control + E 

Command + E 

Page Properties 

Control+J 

Command+J 

Preferences 

Control+ U or 

Control + K 

Command + U or 
Command + K 

Quick Tag Editor 

Action 

Windows 

Macintosh 

Open Quick Tag Editor 

Control+T 

Command+T 

Select parent tag 

Control + Shift+< 

Command + Shift+< 

Select child tag 

Control + Shift+> 

Com mand + Shift +> 

History Palette 

Action 

Windows 

Macintosh 

Open the History palette 

F9 

F9 

Start/stop recording command 

Control + Shift+X 

Comma nd + Shift+X 

Play recorded command 

Control+ P 

Command + P 
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Editing text 


Action 

Windows 

Macintosh 

Create a new paragraph 

Enter 

Return 

Insert a line break 

Shift+Enter 

Shift-1-Return 

Insert a nonbreaking space 

Control + Shift+Spacebar Option + Spacebar 

Move text or object to another 
place in the page 

Drag selected item 
to new location 

Drag selected item 
to new location 

Copy text or object to another 
place in the page 

Control-drag selected 
item to new location 

Option-drag selected 
item to new location 

Copy text only (does not copy 
HTML tags) 

Control + Shift + C 

Command + Shift-1-C 

Paste as text 

Control + Shift+V 

Com mand + Shift-1- V 

Select a word 

Double-click 

Double-click 

Add selected items to library 

Control + Shift+B 

Command + Shift + B 

Switch between Document 
window and HTML inspector 

Control+Tab 

Control+Tab or 
Option+Tab 

Open and close the 

Property inspector 

Control + Shift+J 

Command+ Shift+J 

Check spelling 

Shift+F7 

Shift-1- F7 
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Formatting text 


Action 

Windows 

Macintosh 

Indent 

Control + ] 

Command+] 

Outdent 

Control + [ 

Command + [ 

Format > None 

Control+0 (zero) 

Command + 0 (zero) 

Paragraph Format 

Control + Shift+P 

Com mand +Shift+ P 

Apply Headings 1 through 6 to a 
paragraph 

Control + 1 through 6 

Command + 1 through 6 

Alignment > Left 

Control+Alt + L 

Com mand + Option+ L 

Alignment > Center 

Control+Alt+C 

Command+Option + C 

Alignment > Right 

Control+Alt + R 

Command+Option + R 

Make selected text bold 

Control + B 

Command + B 

Make selected text italic 

Control+ 1 

Command + I 

Edit Style Sheet 

Control + Shift+E 

Com mand +Shift+ E 


Note: Many text formatting shortcuts have no effect when working in the HTML inspector. 


Finding and replacing text 


Action 

Windows 

Macintosh 

Find 

Control+ F 

Command + F 

Find Next/Find Again 

F3 

Command + G 

Replace 

Control+ H 

Command + H 
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Working in tables 


Action 

Windows 

Macintosh 

Select table (with cursor 
inside the table) 

Control+A 

Command+A 

Move to the next cell 

Tab 

Tab 

Move to the previous cell 

Shift+Tab 

Shift+Tab 

Insert a row (before current) 

Control+ M 

Command + M 

Add a row at end of table 

Tab in the last cell 

Tab in the last cell 

Delete the current row 

Control + Shift+M 

Com ma nd +Shift+M 

Insert a column 

Control + Shift+A 

Command + Shift+A 

Delete a column 

Control + Shift+ - 
(hyphen) 

Command + Shift+ - 
(hyphen) 

Merge selected table cells 

Control+Alt+M 

Com mand +Option+ M 

Split table cells 

Control+Alt + S 

Com mand + Option + S 

Update table layout (forces a 
redraw when in "faster table 
editing" mode) 

Control + Spacebar 

Command + Spacebar 

Working with frames 

Action 

Windows 

Macintosh 

Select a frame 

Alt-click in frame 

Shift+Option-click 
in frame 

Select next frame or frameset 

Alt + Right Arrow 

Command + Right Arrow 

Select previous 
frame or frameset 

Alt+Left Arrow 

Command + Left Arrow 

Select parent frameset 

Alt+Up Arrow 

Command + Up Arrow 

Select first child frame 
or frameset 

Alt+Down Arrow 

Command + Down Arrow 

Add a new frame to frameset 

Alt-drag frame border 

Option-drag 
frame border 

Add a new frame to frameset 
using push method 

Alt+Control-drag 
frame border 

Com mand + Option-drag 
frame border 
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Working with layers 


Action 

Windows 

Macintosh 

Select a layer 

Control + Shift-click 

Com mand + Shift-click 

Select and move layer 

Shift+Control-drag 

Com mand +Shift-drag 

Add or remove layer 
from selection 

Shift-click layer 

Shift-click layer 

Move selected layer by pixels 

Arrow keys 

Arrow keys 

Move selected layer by 
snapping increment 

Shift+arrow keys 

Shift+arrow keys 

Resize selected layer by pixels 

Control+Arrow keys 

Option+arrow keys 

Resize selected layer by 
snapping increment 

Control + Shift -Harrow 
keys 

Option + Shift+arrow 
keys 

Align selected layers to the 
Top/Bottom/Left/Right of the 
last selected layer 

Control + U p/Down/Left/ 
Right Arrow 

Com mand + Up/Down/ 
Left/Right Arrow 

Make selected layers 
the same width 

Control + Shift+[ 

Command + Shift+[ 

Make selected layers 
the same height 

Control + Shift+] 

Command + Shift+] 

Convert layers to table 

Control + Shift+F6 

Com mand + Shift+F6 

Convert tables to layers 

Control+ F6 

Command + F6 

Toggle nesting preference on 
or off when creating a layer 

Control-drag 

Command-drag 

Toggle the display of the grid 

Control + Shift+Alt+G 

Command + Shift+ 

Option + G 

Snap To grid 

Control+Alt+G 

Com mand + Option+ G 

Add a keyframe (Timeline) 

Shift+F9 

Shift+F9 

Remove a keyframe (Timeline) 

Delete 

Delete 

Working with timelines 

Action 

Windows 

Macintosh 

Add object to timeline 

Control + Shift+Alt+T 

Command + Shift+ 
Option+T 
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Working with images 


Action 

Windows 

Macintosh 

Change image source attribute 

Double-click image 

Double-click image 

Edit image in external editor 

Control-double-click 

image 

Command-double-click 

image 


Managing hyperlinks 


Action 

Windows 

Macintosh 

Create hyperlink (select text) 

Control+ L 

Command + L 

Remove hyperlink 

Control + Shift+L 

Comma nd +Shift+L 

Drag and drop to create a 
hyperlink from a document 

Select the text, image, or 
object, then Shift-drag 
the selection to a file in 
the Site window 

Select the text, image, or 
object, then Shift-drag 
the selection to a file in 
the Site window 

Drag and drop to create 
a hyperlink using the 

Property inspector 

Select the text, image, or 
object, then drag the 
point-to-file icon in 
Property inspector to a 
file in the Site window 

Select the text, image, or 
object, then drag the 
point-to-file icon in 
Property inspector to a 
file in the Site window 

Open the linked-to document 
in Dreamweaver 

Control-double-click link 

Command- 
double-click link 

Check links selected 

Shift-1- F8 

Shift+F8 

Check links in the entire site 

Control+ F8 

Command + F8 

Targeting and previewing in browsers 

Action 

Windows 

Macintosh 

Preview in primary browser 

FI 2 

FI 2 

Preview in secondary browser 

Control + FI 2 

Command + FI 2 
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Site management and FTP 


Action 

Windows 

Macintosh 

Create new file 

Control + Shift+N 

Command + Shift+N 

Create new folder 

Control + Shift+Alt+N 

Command + Shift+ 

Option + N 

Open selection 

Control + Shift+Alt+0 

Command + Shift+ 

Option + O 

Get selected files or folders 
from remote FTP site 

Control + Shift+D or 
drag files from Remote 
to Local pane in Site 
window 

Command + Shift+D or 
drag files from Remote 
to Local pane in Site 
window 

Put selected files or folders 
to remote FTP site 

Control + Shift+U or 
drag files from Local to 
Remote pane in Site 
window 

Command + Shift+U or 
drag files from Local to 
Remote pane in Site 
window 

Check out 

Control + Shift+Alt+D 

Command + Shift+ 

Option + D 

Check in 

Control + Shift+Alt+U 

Command + Shift+ 

Option + U 

Disconnect 

Control + Shift+Alt+F5 

Command + Shift+ 

Option + F5 

View site map 

Control + F5 

Command + F5 

Refresh remote site 

Alt + F5 

Option + F5 
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Site Map 


Action 

Windows 

Macintosh 

View site files 

F5 

F5 

Refresh Local pane 

Shift+F5 

Shift+F5 

Make root 

Control + Shift+R 

Command + Shift+R 

Link to existing file 

Control + Shift+K 

Command + Shift+K 

Change link 

Control+ L 

Command + L 

Remove link 

Delete 

Delete 

Show/Hide link 

Control + Shift+Y 

Command + Shift+Y 

Show page titles 

Control + Shift+T 

Command + Shift+T 

Rename file 

F2 

n/a 

Zoom in site map 

Control+ + (plus) 

Command+ + (plus) 

Zoom out site map 

Control+ - (hyphen) 

Command+ - (hyphen) 

Playing plugins 

Action 

Windows 

Macintosh 

Play plugin 

Control+Alt+P 

Command+Option + P 

Stop plugin 

Control+Alt+X 

Command + Option+X 

Play all plugins 

Control + Shift+Alt+P 

Command + Shift+ 

Option + P 

Stop all plugins 

Control + Shift+Alt+X 

Command + Shift+ 
Option+X 
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Viewing page elements 


To toggle the display of 

Windows 

Macintosh 

Invisible Elements 

Control + Shift+I 

Command + Shift+I 

Rulers 

Control + Shift+Alt+R 

Command + Shift+ 

Option + R 

Grid 

Control+ Shift+Alt+G 

Command + Shift+ 

Option + G 

Head content 

Control + Shift+W 

Command + Shift+W 

Working with templates 

Action 

Windows 

Macintosh 

Create new editable region 

Control+Alt+V 

Com mand + Option+V 

Mark region as editable 

Control+Alt+W 

Com mand + Option+W 

Inserting objects 

To insert this 

Windows 

Macintosh 

Any object (image, Shockwave 
movie, and so on) 

Drag file from the 
Explorer or Site 
window to the 
Document window 

Drag file from the 

Finder or Site 
window to the 

Document window 

Image 

Control+Alt+I 

Command+Option + l 

Table 

Control+Alt+T 

Command+Option+T 

Flash movie 

Control+Alt+F 

Command + Option+ F 

Shockwave Director movie 

Control+Alt+D 

Command + Option + D 

Named anchor 

Control+Alt+A 

Command + Option+A 
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Opening and closing palettes 


To toggle the display of this 

Windows 

Macintosh 

Objects 

Control + F2 

Command + F2 

Properties 

Control+ F3 

Command + F3 

Launcher 

Shift+F4 

Shift+F4 

Site Files 

F5 

F5 

Site Map 

Control + F5 

Command + F5 

Library 

F6 

F6 

CSS Styles 

F7 

F7 

HTML Styles 

Control+ F7 

Command + F7 

Behaviors 

F8 

F8 

History 

F9 

F9 

HTML Source 

FI 0 

FI 0 

Layers 

F11 

F11 

Timeline 

Control + F9 

Command + F9 

Frames 

Control + FI 0 

Command + FI 0 

Templates 

Control + F11 

Command + F11 

All palettes 

F4 

F4 

Close Document window 

Control+ F4 or 
Control+W 

Command+W 

Getting help 

Action 

Windows 

Macintosh 

Using Dreamweaver Help Topics 

FI 

FI 

Extending Dreamweaver Help 
Topics 

Shift+FI 

Shift+FI 

Dreamweaver Online 

Control + FI 

Command + FI 
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Keyboard Shortcut Matrix 

Note: An asterisk (*) indicates an unused key combination. Italics indicate system-level 
commands. 


Keyboard 

character 

Control 
(Windows) or 
Command 
(Macintosh) 

Control + Shift 
(Windows) or 
Command + Shift 
(Macintosh) 

Control+Alt 
(Windows) or 
Command + 
Option 
(Macintosh) 

Control + Shift+Alt 
(Windows) or 
Command + 
Shift+Option 
(Macintosh) 

A 

Select All, Select 
Table 

Insert Table 
Column 

Insert Named 
Anchor 

k 

B 

Bold (toggle) 

Add to Library 

■k 

k 

C 

Copy 

Copy text only 

Center justify 

k 

D 

Duplicate 

Get Selected Files 
or Folders 

Insert Shockwave 
Director Movie 

Check Out Selected 
Files or Folders 

E 

Launch External 
Editor 

Edit Style Sheet 

* 

* 

F 

Find 

k 

Insert Flash Movie 

k 

G 

Find Again 
(Macintosh only) 

k 

Snap to Grid 
(toggle) 

Show/Flide Grids 

H 

Replace 

Bring to Front 

Move Backward 

Send to Back 

1 

Italic (toggle) 

Show Invisibles 
(toggle) 

Insert Image 

k 

J 

Page Properties 

Property inspector 
(toggle) 

k 

k 

K 

Preferences 

Link to Existing 

File 

k 

k 

L 

Create Link 

Remove Link 

Left Justify 

k 

M 

Insert Table Row 

Delete Table Row 

Merge Selected 
Table Cells 

k 

N 

New Window 
(Windows) 

New Page 
(Macintosh) 

New Page 
(Windows only) 

k 

New Site Folder 

0 

Open 

Open in Frame 

k 

Open Selected Site 
File 

P 

Play Recorded 
Command 

Paragraph Format 

Play Plugin 

Play All Plugins 
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Keyboard 

character 

Control 
(Windows) or 
Command 
(Macintosh) 

Control + Shift 
(Windows) or 
Command + Shift 
(Macintosh) 

Control+Alt 
(Windows) or 
Command + 
Option 
(Macintosh) 

Control + Shift+Alt 
(Windows) or 
Command + 

Shift + Option 
(Macintosh) 

Q 

Quit 

4e 

* 

4c 

R 

Import 

Make Root 

Right Justify 

Show/Hide Rulers 

S 

Save 

Save All 

Split Table Cell 

* 

T 

Quick Tag Editor 

Show Page Titles 
in Site Map 

Insert Table 

Add Object to 
Timeline 

U 

Preferences 

Put Selected Files 
or Folders 

* 

Check In Selected 
Files or Folders 

V 

Paste 

Paste as Text 

Create New 
Editable Region 

4c 

w 

Close 

View Head 

Content 

Mark Region as 
Editable 

4c 

X 

Cut 

Start Recording 
Command 

Stop Plugin 

Stop All Plugins 

Y 

Redo 

Show/Hide Link 

4c 

4c 

z 

Undo 

Redo 

4c 

4c 

0 (zero) 

Set Paragraph 
Format to None 

4c 

4c 

4c 

1 

Apply Pleading 1 
to Paragraph 

4c 

4c 

4c 

2 

Apply Pleading 2 
to Paragraph 

4c 

* 

4c 

3 

Apply Heading 3 
to Paragraph 

4c 

* 

4c 

4 

Apply Heading 4 
to Paragraph 

4c 

* 

4c 

5 

Apply Heading 5 
to Paragraph 

4c 

4c 

4c 

6 

Apply Heading 6 
to Paragraph 

4c 

4c 

4c 

7 

4c 

4c 

4c 

4c 

8 

* 

4c 

4c 

4c 

9 

* 

4c 

4c 

* 
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Keyboard 

character 

Control 
(Windows) or 
Command 
(Macintosh) 

Control + Shift 
(Windows) or 
Command + Shift 
(Macintosh) 

Control+Alt 
(Windows) or 
Command + 
Option 
(Macintosh) 

Control + Shift+Alt 
(Windows) or 
Command + 

Shift + Option 
(Macintosh) 

- (minus) and Site Map Zoom 
_ (Underscore) Out 

Delete Table 
Column 

* 

4c 

= and + 

Fit to Window 

Site Map Zoom In 

4c 

4c 

[ and { 

Outdent (Move 
Backward) 

Decrease Column 
Span (Tables), 
Make Layers Same 
Width (Layers) 

4c 

4c 

] and } 

Indent (Move 
Forward) 

Increase Column 
Span (Tables), 
Make Layers Same 
Heig ht (Layers) 

4c 

4c 

. (period) and 
> 

Stop Plugin 

Select Child Tag 

* 


, (comma) 
and < 

* 

Select Parent Tag 

* 

4c 

? and / 

* 

4c 

4c 

4c 

; and : 

* 

4c 

4c 

4c 

' and " 

* 

4c 

4c 

4c 

' and ~ 

4c 

4c 

4c 

4c 

\and | 

* 

4c 

4c 

4c 

Spacebar 

Update Table 
Layout 

Insert Non¬ 
breaking Space 
(Windows) 

(Option + 

Spacebar on 
Macintosh) 

4c 

4c 
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Function 

Key 

No modifier 

Shift 

Alt 

(Windows) 
or Option 
(Macintosh) 

Control 

(Windows) 

or 

Command 

(Macintosh) 

Control + 
Shift 

(Windows) 

or 

CommandT 

Shift 

(Macintosh) 

Control + Control + 

Alt Shift+Alt 

(Windows) (Windows) 

or or 

Command+ CommandT 
Option Shift+ 

(Macintosh) Option 

(Macintosh) 

FI 

Using 

Dreamweav 
er Help 

Extending 
Dreamweav 
er Help 

k 

Dreamweaver 

Online 

* 

* 

k 

F2 

Rename file 
in Site Map 
(Windows 
only) 

* 

k 

Object 

Palette 

* 

* 

k 

F3 

Find again 
(Windows 
only) 

* 

* 

Property 

Inspector 

* 

* 

k 

F4 

Flide/Show 

Floating 

Windows 

Launcher 

Quit 

(Windows 

only) 

Close 

Window 

* 

* 

k 

F5 

Site Files 

Refresh 

Local Pane 

Refresh 

Remote 

Pane 

Site Map 

k 

k 

Disconnect 

from 

Remote Site 

F6 

Library 

palette 

k 

k 

Convert 

Tables to 
Layers 

Convert 
Layers 
to Table 

k 

* 

F7 

CSS Styles 

Check 

Spelling 

* 

HTML Styles 

* 

k 

* 

F8 

Behavior 

Check Links - 
Selected 

k 

Check Links - 
Entire Site 

* 

k 

* 

F9 

H istory 
palette 

Add 

keyframe 

k 

Timeline 

k 

k 

k 

F10 

HTML 

Source 

inspector 

k 

* 

Frame 

inspector 

k 

k 

k 

F11 

Layers 

k 

k 

Templates 

Palette 

k 

k 

k 

FI 2 

Preview in 

Primary 

Browser 

k 

k 

Preview in 
Secondary 
Browser 

k 

k 

k 
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INDEX 


A 

Absolute bottom alignment 203 
Absolute middle alignment 203 
absolute paths 110 
actions 

browser compatibility 304 
changing in behaviors 303 
choosing in Behavior inspector 301 
controlling timelines 263 
creating 303 
defined 297 

included with Dreamweaver 304 
See also individual actions by name 
Active Links option 96 
Active Server Pages (ASP) 
about 403 
editing 351 

tags, customizing parsing and appearance 399 
ActiveX controls 
inserting 281 
overview 292 
properties 292 
resizing 204 

Add Frame command 255 

Add Object to Library command 369 

Add Object to Timeline command 255 

Add to Page option (Library palette) 375 

Add/Remove Netscape Resize Fix command 239 

adding an object to a timeline 255 

adding frames in a timeline 257 

Adjust Position command 105 

Aftershock objects 288 

Align image property 201 

Align with Selection command 105 

aligning 

layers 246 
options 203 
page elements 203 
text 182 

tracing images 105 


All Info tab (Design Notes) 173 
Alt image property 201 
Always Nest When Created Within Existing 
Layer option 239 

Anchor object (Object palette) 119 
anchors, named 119 
animations 

along complex path 256 
applying to objects 261 
copying and pasting 260 
creating 255 
improving 262 
overview 106 
timelines 253 
AppleTalk servers 141 
applets. See Java applets 
applications, using with Dreamweaver 74 
Apply Source Formatting command 348 
Apply Source Formatting option 349 
Apply Template to Page command 365 
ASP. See Active Server Pages 
aspect ratio, maintaining 204 
attributes 

in browser profiles 394 
searches 157 
See also tags 

Auto Apply option (HTML Style palette) 185 
Automatic Wrapping option 344 
automating tasks 99 
Autoplay option 253 


background 

page image and color 96 
transparency in 96 

Background option (HTML Colors) 346 
Baseline and Bottom alignment 203 
Basic Info tab (Design Notes) 173 
basics of Dreamweaver 14 
BBEdit (Macintosh) 351 
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behavior channel in timelines 253 
Behavior inspector 298 
behaviors 

actions, creating 303 
and forms 381 
and images 214 
and library items 373 
and media 296 
and templates 363 
and timelines 302 
attaching 301 
changing 303 

compatibility with browsers 304 
defined 297 
deleting 303 
third-party 304 
triggering 301 
bitmaps, resizing 204 
BLOCKQUOTE tag 182 
BODY tag 107 
bold text 179 

Border image property 202 
borders 

adding to a table 222 
in a frame 277 
removing 216 

branches, expanding and collapsing in site map 134 
Browser default option (Alignment) 203 
browsers 

3.0 compatible files 252 
and CSS styles 195 
colors, safe 94 

compatibility, planning for 164 
compatibility, testing for 167 
detecting 165 
previewing in 170 
primary, defining 170 
profiles, creating 396 
profiles, editing 394 
targeting 167 
versions, checking 308 


c 

Cache option 79 

Call JavaScript action 306 

Case for Attributes option 345 

Case for Tags option 345 

Cell Padding option 216 

Cell Spacing option 216 

cells. See table cells 

Centering option 345 

CFML. See ColdFusion Markup Language 

CGI scripts 380 

Change Link Sitewide command 136 
Change Property action 307 
characters, special 89 
Check Browser action 308 
Check In/Out options 148 
Check Out Files When Opening option 148 
Check Plugin action 309 
Check Spelling command 197 
Check Target Browsers command 167 
checking files in and out 
overview 147 
undoing a check out 149 
checking links 168 
CLASS attribute 191 
Clean up <font> Tags option 349 
Clean up CSS option 349 
Clean Up F1TML command 347 
Clean Up Word HTML command 348 
Clear Paragraph Style option 185 
Clear Selection Style option 185 
client-side image maps, creating 211 
ColdFusion Markup Language (CFML) 
and Dreamweaver 334 
editing CFML tags 351 
overview 404 

tags, customizing parsing and appearance 399 
collaborative environments 147 
color 

choosing 93 
default for page text 96 
eyedropper, using 93 
frame background 277 
page background 96 
text, changing 181 
Web-safe 94 
color box option 93 
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Color command 181 
columns, rows, and cells 

adding and removing 230 
background color, adding 224 
formatting 223 

Combine Nested Tags When Possible option 347 

combining floating palettes 63 

commands 

accessing from context menu 71 
creating, from history steps 102 
recording 103 
renaming 391 

Commands menu, editing 387 
Comments option (HTML Colors) 346 
comments, inserting 354 
Common Gateway Interface (CGI) scripts 380 
Configuration folder 

Behaviors subfolder 391 
BrowserProfiles subfolder 394 
Commands subfolder 391 
Extensions.txt file 386 
menus.xml file 386 
Objects subfolder 384 
SourceFormat.txt file 392 
ThirdPartyTags subfolder 399 
Connection Speed option 67 
content, adding to tables 217 
context menus 71 

Control Shockwave or Flash action 311 
conventions 15 

Convert Layers to Tables command 250 
Convert Tables to Layers command 252 
copying history steps 101 
Create Library Item command 369 
CSS Style palette 194 
CSS styles 

applying custom 193 

attributes, converting to HTML 196 

class attribute 191 

creating 191 

selectors 191 

custom styles. See style sheets 
customizing 

dialog boxes 391 
Dreamweaver 383 
Launcher and Mini-Launcher 68 
menus 386 


customizing (continued) 

Object palette 384 
tags, third-party 399 

D 

dates, inserting 89 
default file type, changing 386 
Define HTML Style dialog box 185 
Delete command (Library palette) 375 
dependent files 
getting 151 
putting 152 

showing and hiding 133 
Design Notes 

adding status choices 174 
disabling 174 

for documents and objects 173 
for Fireworks files 175 
for media objects 283 
overview 172 

saving file information 172 
setting up 172 

Detach from Original option 372 
Detach From Template command 366 
detecting browsers and plugins 165 
dialog boxes, customizing 391 
dictionary, editing 197 
Director 

and Aftershock 288 
Shockwave movies, creating 284 
directory structure, site. See sites 
display options 

floating palettes 64 
fonts 73 

displaying 

layers 249 
tracing images 105 
docking floating palettes 63 
Document window 
basics 65 

editing an HTML tag 336 

HTML Source inspector, switching to 335 

Mini-Launcher 65 

opening documents 86 

page size and download time 65 

playing Navigator plugins 291 

resizing 66 
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Document window (continued) 
searching for text 155 
selecting elements 91 
tag selector 65 
title bar 65 

Window Size pop-up menu 65 
document-relative paths 
about 111 
setting 115 
documents 

checking links 168 
creating 86 

creating, based on templates 365 
Design Notes, using with 172 
download size, time 171 
opening 86 
page title 95 

previewing in browsers 170 
searching 154 
setting properties 95 
templates, detaching from 366 
text, adding 88 
download time 65 
downloading 

behaviors 304 
size, time estimates 171 
downloading and editing existing sites 80 
Drag Layer action 312 
Dreamweaver HTML Help Pages 11 
Dreamweaver Support Center 13 


Edit button (image Property inspector) 202 

Edit button (script Property inspector) 353 

Edit Font List command 180 

Edit NoFrames Content command 279 

Edit Style Sheet command 191 

editing HTML 334 

editors. See external editors 

elements 

aligning 203 
viewing invisible 416 
e-mail links 

changing 136 
creating 120, 121 

Enable File Check In and Check Out option 148 
encodings 73 


entities 89 

Eraser button 93 

event handlers. See events 

event procedures. See actions 

events 

available for different browsers and objects 299 
changing in behaviors 303 
defined 297 
triggering actions 301 
Export Table command 234 
Extending Dreamweaver book and Help pages 13 
extensibility 

JavaScript 398 
overview 398 
third-party behaviors 304 
external editors 

BBEdit (Macintosh), integration with 351 
HomeSite (Windows) 334 
HTML, launching 335 
HTML, overview 350 
images 205 
media 282 
text, overview 350 
external style sheets 
creating 190 
editing 191 
linking to 190 
eyedropper 93 

F 

features, new in Dreamweaver 16 

file formats, image 199 

files 

checking in and out 147 
downloading 150 
getting 150 
managing 144 
putting 151 
searching 154 

synchronizing local and remote sites 153 
transferring with FTP 141 
types, default 386 
uploading 151 
viewing in Site window 84 
Find In options 155 
Find What options 156 
finding and replacing. See searching 
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firewalls 

defining host and port 146 
options 142 
Fireworks 

Design Notes in 175 
HTML files from 209 
optimizing images in 207 
Fix Invalidly Nested and Unclosed Tags 
option (preferences) 343 

Fix Invalidly Nested Tags option (Clean Up Word 
HTML) 349 

Flash movies 

controlling 311 
inserting 286 
overview 286 
properties 287 
resizing 204 
folders 

root 79 
searching 154 

Font Combination option 183 
fonts 

changing characteristics 179 
changing color of 181 
changing combinations 180 
encodings, setting fonts for 73 
Fonts/Encoding preferences 73 
Form command 378 
Format option 183 
Format Table command 225 
formatting HTML source code 
customizing 392 
preferences 342 
forms 

behaviors, using with 381 
client-side scripting 380 
creating 378 
fields, validating 331 
jump menus, creating 123 
objects, adding 378 
overview 377 
processing 380 
properties 378 
server-side scripting 380 
fps 253 

Frame inspector 269 


frames 

behaviors, using with 280 
borders 277 

browser compatibility 279 

changing background color 277 

changing content 278 

creating 266 

deleting 266 

nested 268 

overview 265 

properties 272 

resizing 276 

saving files in 271 

selecting 269 

shortcuts 411 

targeting 278 

Frames and Framesets option 344 
frames per second (fps) 253 
framesets 

borders 277 
naming 272 
nested 268 

predefined, inserting 267 
properties 274 
saving files in 271 
selecting 269 
targeting links in 115 
See also frames 

FTP 

log 151 

preferences 146 
transferring files with 141 
troubleshooting 143 
FTP Host Name field 141 
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G 

General preferences 73 

Generator objects, overview 289 

Get and Put Newer Files option 153 

Get command 150 

Get More Behaviors command 304 

Get Newer Files from Remote option 153 

getting files from a remote server 150 

GIF images 

as tracing image 105 
uses for 199 

Go button, associating with a jump menu 317 

Go To Timeline Frame action 329 

Go To URL action 316 

graphics. See images 

grid 

as guide 104 
changing setting of 247 
showing 247 
snapping layers to 247 
Guided Tour 11 

H 

F1EAD section, editing content in 107 
header cell, formatting 224 
heading tags 178 
Help 11 

shortcuts 417 

hidden files, showing and hiding 133 
History palette 

automating tasks with 99 

clearing the history list 97 

commands, creating from history steps 102 

maximum steps, setting 97 

overview 97 

steps, applying to other objects 100 
steps, copying and pasting 101 
steps, repeating 99 
undoing changes 98 
home page, setting 131 
HomeSite (Windows) 334 
horizontal rules 90 
Host Directory field 142 


hotspots 

applying behaviors to 214 
in image maps 211 
properties 213 

selecting multiple in an image map 212 
HTML Corrections log file 348 
HTML documents. See documents 86 
HTML source code 
cleaning up 347 

cleaning up MS Word HTML 348 

CSS attributes conversion 196 

editing in Document window 336 

editing overview 333 

editing with BBEdit 351 

external editors 350 

formatting in existing documents 348 

formatting preferences overview 342 

formatting preferences, setting 344 

formatting profile 392 

from Fireworks 209 

hints pop-up menus 340 

reference material 19 

rewriting preferences 343 

searching 155, 157 

selecting in the Document window 91 
tag color preferences 346 
tag searches 157 
tag styles 188 

tags, correcting invalid 349 
tags, removing 341 

viewing with HTML Source inspector 72 
HTML Source inspector 

Document window, switching to 335 
overview 335 

HTML Source option 157 
HTML styles 
applying 185 
clearing 185 
creating 186-187 
deleting 186 
editing 187 
modifying 187 
New Style icon 187 
removing from palette 186 
using in other sites 187 
viewing 185 
HTTP Address field 79 
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I 

Ignore Whitespace Differences option 156 
Image inspector 211 
image maps 

creating client-side 211 
hotspots 211 
overview 211 

selecting multiple hotspots 212 
images 

aligning 182 

applying behaviors to 214 
changing source file with timelines 258 
editing 205 

external image editors 205 
formats, supported 199 
image maps 211 
in tables 217 
inserting 200 

optimizing in Fireworks 207 
preloading (behavior) 320 
preloading automatically 208 
properties 201 
resizing visually 204 
restoring swapped (behavior) 329 
scalability 204 
shortcuts 413 
swapping (behavior) 328 
Import Table Data command 218 
Import Word HTML command 348 
Indent and Outdent options 

(text Property inspector) 183 
Indent option (preferences) 344 
Indent Size option 344 
indenting text 182 
Index, Help 12 

Insert E-Mail Link dialog box 120 
Insert Jump Menu dialog box 123 
Insert Named Anchor dialog box 119 
Insert Navigation Bar dialog box 125 
Insert Tabular Data command 218 
inserting 

ActiveX controls 292 
Aftershock objects 288 
dates 89 

Fireworks HTML 210 
Flash movies 286 
Generator objects 289 


inserting (continued) 
images 200 
Java applets 294 
media elements 281 
rollover images 208 
server-side includes 375 
Shockwave movies 284 
special characters 90 
inspectors 

Behavior inspector 298 
HTML Source inspector 335 
Image inspector 211 
opening and closing with Launcher 68 
Property inspector 67 
shortcuts 417 
See also palettes 
installing Dreamweaver 10 

integrating Dreamweaver with other applications 74 

interactivity 106 

Invalid HTML marker 349 

invalid tags 

correcting 349 
displaying 334 
invisible elements 
comments 354 
preferences 92 
scripts 353 

selecting 91 
showing and hiding 92 
italics 179 
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J 

Java applets 

inserting 281, 294 
overview 294 
properties 295 
resizing 204 
JavaScript 

actions 299 
alerts 319 
executing 306 

extending Dreamweaver 398 
inserting scripts 353 
JavaServer Pages (JSP), about 404 
JPEG images 

as tracing image 105 
uses for 199 
JSP 404 

Jump Menu action 316 
Jump Menu Go action 317 
jump menus 

adding menu items 123 
changing menu items 124 
creating a selection prompt for 123 
editing 316 

Go buttons (behavior) 317 
Go buttons, adding automatically 123 

K 

keyboard shortcuts 407 
changing 390 
keyframes 

creating 255 
overview 253 

L 

Language script property 353 
Launcher 

customizing 68 
Mini-Launcher 65 
using 68 

Layer palette 237 
layer preferences 
layer tags 239 
nesting 239 

Netscape 4 layer compatibility 239 
layer properties 239 


layers 

activating 243 
aligning 246 
anchor points 92 
changing stacking order of 248 
changing visibility with behaviors 326 
changing visibility with Layer palette 249 
converting for 3.0 browsers 252 
converting to tables 250 
creating 236 
draggable 314 
drawing multiple 236 
in table design 250 
inserting 236 
manipulating 243 
markers, displaying 236 
moving 246 
nesting 238 
overview 235 
positioning 239 
preferences 239 
preventing overlap 251 
properties 239 
properties for multiple 242 
resizing 245 
selecting 244 
selecting multiple 242 
shortcuts 412 
snapping to grid 247 
visibility 249 
learning Dreamweaver 14 
Left alignment 203 
libraries 

adding items to pages 370, 374 

changing highlight color for items 370 

creating items 369 

deleting items 372 

editing behaviors in items 373 

editing items 371 

item properties 374 

making items editable in documents 372 
opening items 374 
overview 369 
preferences 370 
Library palette 374 

Line Breaks option (HTML Lormat) 345 
Line Numbers option 335 
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Link Checker dialog box 169 

Link Color option 96 

Link External Style Sheet dialog box 190 

Link image property 201 

Link option 183 

Link to Existing File command 130 
Link to New File command 130 
linking 

anchors 119 
documents 115 

to document using point-to-file icon 116 

to external CSS style sheet 190 

to named anchor using point-to-file icon 120 

links 

cache file 135 
changing frames with 278 
changing sitewide 136 
checking 168 
creating 115 

creating with point-to-file icon 116 
fixing 169 
opening source 132 
Relative to Document 115 
Relative to Site Root 115 
removing 132 
shortcuts 413 
site map 132 
specifying 183 
targeting 114 
testing 137 
to anchors 119 
to document 114 
to style sheets 190 
updating 135 
List Item option 183 
lists, creating 183 
Load Query button 160 
Local Files option 83 
local root folder 79 
Local Root Folder field 79 
local sites. See sites 78 
Loop option 253 
looping timelines 257 
Low Src image property 202 


M 

macros (creating commands) 102 
Make Editable command 372 
Map Name Field image property 202 
MAP tag 211 

markers for invisible elements 92 
Match Case option 156 
media elements 
inserting 281 
parameters 296 
menus, customizing 386 
Merge Cells command 231 
Microsoft Word HTML 
cleaning up 348 
importing 348 
Middle alignment 203 
Mini-Launcher 

customizing 68 
introduction 65 

monitor size, resizing pages to fit 66 
movies, inserting 281 
multimedia. See media 

N 

Name property (image Property inspector) 201 
Named Anchor command 119 
named anchors 
creating 119 

displaying marker in Document window 119 
navigation bar 

adding images to 125 
creating 124 

displaying horizontally in a page 126 
displaying vertically in a page 126 
image states 124 
inserting in a table 126 
modifying elements 127 
Navigation Bar command 208 
nesting 

frames 268 
layers 238 

Netscape Navigator plugins 

playing in Document window 291 
properties 290 
troubleshooting 291 

Never Rewrite HTML In Files with Extensions 
option 343 
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new features in Dreamweaver 16 
New From Template command 87, 365 
NFS servers 141 
NOFRAMES content 279 
null links 

changing 136 
creating 121 

o 

Object palette 

customizing 384 
overview 69 
panels 69 
preferences 70 
objects 

adding Design Notes 173 
adding to forms 378 
creating 385 
inserting 88 

inserting with Object palette 69 
shortcuts 416 
OL tag 182 
onBlur event 331 
Open (folder icon) option 375 
Open Attached Template command 366 
Open Browser Window action 317 
Open Linked Page command 137 
Open Style Sheet icon 190 
opening 

documents 86 

file types other than HTML by default 386 
Optimize Image in Fireworks command 207 
Ordered List option 183 
Original Image field 208 
overlapping tags 334 
Override Case Of option 345 
overview of Dreamweaver 9 


P 

page size, resizing to fit monitor 66 
pages 

background image 96 
changing title 95 
color 96 

default text colors 96 
Design Notes, using with 172 
download time, estimated 171 
previewing in browsers 170 
properties, and templates 358 
size 171 

Palette button 93 
palettes 

color 93 
docking 63 
History palette 97 
Launcher 68 
Library palette 374 
Object palette 69 

opening and closing with Launcher 68 
setting floating preferences 64 
shortcuts 417 
Template palette 364 
See also inspectors 
paragraph tags 178 
Parameters dialog box 296 
Paste as Text command 88 
pasting history steps 101 
paths 

absolute 110 
document-relative 111 
root-relative 113 
See also links 
personal dictionary 197 
photographs 199 
PHP Hypertext Preprocessor 404 
pixels, transparent 96 
planning a Web site 76 
Play Sound action 319 
Play Timeline action 330 
playback head 253 
plugins 

checking 309 
detecting 165 
Netscape Navigator 290 
playing in Document window 291 
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plugins (continued) 

playing shortcuts 415 
resizing 204 
troubleshooting 291 
PNG images 

as tracing image 105 
uses for 199 
point-to-file icon 116 
Popup Message action 319 
preferences 

dictionary for spell checking 197 

External Editors 282 

floating palettes 64 

Fonts 73 

General 73 

HTML Colors 346 

HTML Format 344 

HTML Rewriting 343 

Invisible Elements 92 

Layer 239 

libraries 370 

Object palette 70 

overview 73 

Preview in Browser 171 

Preview Using Local Server 

(root-relative links) 113 
Site FTP 146 
status bar 67 
Style Sheet Format 195 
template 360 
Translation 376 
updating links 135 
Preload Images action 320 
Preload Images option 208 
Prevent Layer Overlaps command 251 
Preview in Browser command 170 
Preview Using Local Server command 113 
previewing in browsers 
overview 170 
shortcuts 413 
primary browser 171 
processing forms 380 
profiles 

browsers 394 

HTML source format 392 


properties 

ActiveX controls 292 
changing with behaviors 307 
column, row, and cell 223 
displaying 67 
Flash movies 287 
frame 272 
frameset 274 
hotspots 213 
image 201 
Java applets 295 
layer 239 
multiple layer 242 
Shockwave movies 285 
table 222 
Property inspector 

ActiveX control properties 292 
displaying 67 
expanding 67 
fixing broken links 169 
Flash movie properties 287 
form properties 378 
hotspots 213 
images 201 

Java applet properties 295 
library item properties 374 
Netscape Navigator plugin properties 290 
scripts 353 

Shockwave movie properties 285 
Put command 151 

Put Newer Files to Remote option 153 
putting files on a remote server 151 


Quick Tag Editor 

Edit Tag mode 340 
Insert HTML mode 339 
opening 336 
overview 336 
preferences 341 
using 337 

Wrap Tag mode 340 
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Record Path of Layer command 256 

recording commands 103 

Redefine HTML Tag option 191 

reference material 19 

Refresh image property 202 

Refresh Local File List Automatically option 79 

regular expressions 161 

Remote Files option 83 

remote sites. See sites 

Remove all Word Specific Markup option 349 
Remove Dreamweaver HTML Comments option 347 
Remove Empty Tags option 347 
Remove Extra Closing Tags option 343 
Remove Frame command 255 
Remove Non-Dreamweaver HTML Comments 
option 347 

Remove Redundant Nested Tags option 347 

Remove Specific Tag(s) option 347 

Remove Timeline command 259 

removing frames from a timeline 257 

Rename option (Library palette) 375 

repeating steps 99 

Replay button 99 

Reset Origin command 104 

Reset Position command 105 

resize handles 204 

resizing 

frames 276 
layers 245 
page elements 204 
table cells 228 
resources, Web reference 19 
reusing 

library items 370 
searches 160 
templates 365 
Right alignment 203 
roadmap (where to start) 14 
Rollover Image field 208 
rollovers 208 

creating 208 
making a link 208 
testing 208 
root folder 
local 79 
remote 142 


root-relative paths 
about 113 

Preview Using Local Server preference 113 
setting 115 

Roundtrip HTML 334 
Rows and Columns option 216 
rulers 104 


Save All command 271 
Save as Template command 357 
Save Framesets command 271 
Save Query button 160 
saving 

files in frames and framesets 271 
searches 160 
script links 

changing 136 
creating 121 
scripts 

entering and editing 353 
properties 353 
showing in Document 92 
Search, Help 12 
searching 

for files 154 

HTML tags and attributes 157 
regular expressions 161 
saving search patterns 160 
shortcuts 410 

text between specific tags 159 
text in HTML source 157 
text within files 155 
secondary browser 171 

Select In Site Window option (Library palette) 375 
Select Newer Local command 153 
Select Newer Remote command 153 
selecting 

frames and framesets 269 
layers 244 

objects in the Document window 91 
Server Access options 141 
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servers 

access options 141 
AppleTalk 141 
defining 140 
NFS 141 

setup troubleshooting 143 
server-side image maps 211 
server-side includes 
editing 376 
inserting 375 
overview 375 

processing and viewing 376 
translation options 376 
Set as Home Page command 131 
Set Background Color option 

(Clean Up Word HTML) 349 
Set Color Scheme command 96 
Set Nav Bar Image action 321 
Set Text of Frame action 322 
Set Text of Layer action 323 
Set Text of Status Bar action 324 
Set Text of Text Field action 325 
Shockwave movies 
controlling 311 
inserting 284 
overview 284 
properties 285 
resizing 204 

shortcut menus. See context menus 
shortcuts 407 

shortcuts, keyboard, changing 390 
Show Log on Completion option 347, 349 
Show Me movies 11 

Show Mini-Launcher in Status Bar option 67 

Show Page Titles in site map 131 

Show-Hide Layers action 326 

Site Files view 84 

Site FTP preferences 146 

site maps 

adding files to a site 130 

changing links in 132 

collapsing a branch 134 

Display Dependent Files option 133 

editing pages 130 

expanding a branch 134 

Link to Existing File command 130 

Link to New File command 130 


site maps (continued) 
links 132 

marking files hidden 133 
Refresh Local command 131 
removing links in 132 
renaming pages in 131 
saving as an image file 134 
selecting multiple pages in 130 
Set as Home Page command 131 
shortcuts 415 
show hidden files 133 
Show Page Titles option 131 
showing dependent files in 133 
updating after changes 131 
viewing 82 

viewing a branch of 134 

Site Name field 79 

site root relative paths. See root-relative paths 

Site window 
basics 81 

changing the display 83 
Get command 150 
overview 144 
Put command 151 
searching for files 154 
searching for text 155 
Site Files view 144 
Site Map view 144 
site maps 82 
toolbar options 144 
viewing local sites 81 

sites 

adding files and folders 84 
browser compatibility 164, 167 
cache 135 

changing display 83 

changing links sitewide 136 

checking files in and out 148 

checking links 168 

Design Notes, using with 172 

downloading and editing existing remote sites 80 

fixing broken links 169 

local versus remote 76 

local, associating a remote server with 140 

local, creating 78 

local, locating files in 154 

local, root folder 79 
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sites (continued) 

local, viewing 81 
previewing in browsers 170 
remote, access options 141 
remote, defining 140 
remote, locating files in 155 
remote, root folder 142 
remote, setting up 140 
remote, setup troubleshooting 143 
removing from site list 85 
searching for files in 154 
selecting updated files 84 
shortcuts 414 

structure and navigation 139 
testing 166 
viewing 81 

Size option (font) 183 
slider controls, creating 312 
sound, playing 319 
source format profile 392 
Source script property 353 
SourceFormat.txt file 342 
special characters 
inserting 90 
overview 89 

Special Characters options 

(HTML Rewriting preferences) 343 
spelling, checking 197 
Split Cells command 232 
Split Frame commands 266 
Src image property 201 
stacking order 

changing with timelines 258 
layers 248 
starting out 14 
status bar 

overview 65 
preferences 67 
setting text (behavior) 324 
Window Size pop-up menu 65 
Stop Timeline action 330 
style sheets 

editing external style sheets 191 

external 190 

overview 188 

preferences 195 

See also styles 


Style submenu 179 
styles 188 

applying custom styles 193 
conflicting 194 
converting to HTML 195 
creating 191 

CSS to HTML markup conversion table 196 
HTML 184 
in templates 363 
See also style sheets 
Swap Image action 328 
Swap Image Restore action 329 
synchronizing local and remote sites 153 
system requirements 
Macintosh 10 
Windows 10 

T 

Tab Size option 344 
table border 
colors 223 
width 223 
table cells 

background color, adding 224 
background image, adding 224 
copying and pasting 226 
formatting 223 
header cells, designating 224 
merging 231 
See also tables 
splitting 231 

Table of Contents, Help 12 

Table Rows and Columns option 344 

tables 

adding and removing rows and columns 230 

adding background color to 223 

adding background images to 223 

adding borders to 222 

adding content to 217 

adjusting rows and columns 228 

aligning 224 

cells, splitting 232 

changing column width 228 

clearing cell width and height 229 

columns, rows, and cells 223 

converting from layers 250 

creating 216 
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tables (continued) 
formatting 221 
HTML tags 221 
merging cells 232 
nesting 231 
No Wrap option 224 
overview 215 
preset designs for 225 
properties 222 
resizing 228 
selecting elements 219 
shortcuts 411 
sorting 233 
width, setting 222 
See also columns, rows, and cells 
Tag Default option 346 
Tag Specific option 346 
tags 

applying 178 
ASP 351 

BLOCKQUOTE 182 
BODY 107 
CFML 351 
correcting invalid 349 
editing 336 
in browser profiles 394 
invalid 334 
OL 182 

overlapping 334 

removing 341 

searches 157 

selecting 91 

specifications 399 

table 221 

TAGSPEC 399 

third-party, customizing 399 

UL 182 

wrapping 336 

XML 334 

Target image property 202 
Target option 183 
targeting browsers 

browser profiles 394 

converting file to 3.0 compatible 252 

shortcuts 413 


targeting frames to 
_blank 278 
_parent 278 
_self 278 
_top 278 
targeting links 

in documents 115 

opening document in a new window 115 
team environments 147 
Template palette 364 
templates 

applying to existing document 365 
changing highlight colors 360 
creating 357 

creating new documents with 87, 365 
defining editable regions 359 
detaching document from 366 
editable versus locked regions 359 
editing 357 

finding editable regions 365 
making region noneditable 363 
modying 366 
overview 355 
page properties 358 
preferences 360 
renaming 364 
shortcuts 416 
Template palette 364 
Templates folder 357 
using behaviors 363 
using styles 363 
using timelines 363 
viewing regions 361 
XML 367 
testing sites 166 
text 

adding to documents 88 
alignment 182 

changing font combinations 180 
color, changing 181 
default color in pages 96 
editing shortcuts 409 
external editors. See external editors 
formating shortcuts 410 
formatting 177 

formatting with HTML styles 184 
indenting 182 

searching within documents 155 
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Text Color option 96, 183 

text editors. See external editors 

text fields, setting text with behaviors 325 

Text option (HTML Colors) 346 

Text top alignment 203 

text-based HTML editors. See external editors 

third-party tags 

avoiding rewriting 405 
customizing 399 
Timeline inspector 253 
timelines 

adding an object to 255 

adding and removing frames 257 

animation tips 262 

attaching a behavior 302 

changing image source file 258 

changing layer properties 258 

complex paths 256 

controlling with behaviors 263 

creating 255 

in templates 363 

keyframes 255 

looping 257 

modifying 257 

multiple 259 

playback head 253 

playing and stopping using behaviors 330 
playing automatically 257 
renaming 261 
shortcuts 412 
Top alignment 203 
tracing images 105 

transferring files, troubleshooting 151 
transparent pixels 96 
troubleshooting 

Navigator plugins 291 
transferring files 151 
typographical conventions 15 


UL tag 182 
underline 179 

undoing more than one step 98 

Unmark Editable Region command 363 

Unordered List option 183 

unordered lists, creating 183 

Update Current Page command 366 

Update Pages command 366 

Update Pages option (Library palette) 375 

updating links 135 

uploading files 151 

URLs. See paths 

Use Firewall option 142 

Use FTP option 141 

Use Local/Network option 141 

Use None option 141 

Use option (HTML Format preferences) 344 
Use Passive FTP option 142 
Use Regular Expressions option 156 
USEMAP attribute 211 
Using Dreamweaver book 13 

V 

V Space and H Space image properties 201 
Validate Form action 331 

VBScript 353 

viewing 

editable and locked HTML in templates 362 

editable and locked regions in templates 361 

HEAD content 107 

invisible elements 92 

server-side includes 376 

sites 81 

Visited Links option 96 
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w 

W and H image properties 201 

Warn when Fixing or Removing Tags option 343 

Web design, levels of experience in 14 

Web Server Info 140 

Web servers. See servers 

When Creating Styles Use Shorthand For option 195 
When Editing Existing Styles Use Shorthand 
option 195 
Window menu 63 
Window Size pop-up menu 65 
windows 

opening and closing with Launcher 68 
shortcuts 417 
See also inspectors, palettes 
Word HTML. See Microsoft Word HTML 
work area 62 
Wrap option 335 

X 

XML 

in templates 367 
overview 368 

tag notations when exporting 368 
tags 334 

TAGSPEC tag 399 


Z-Index option, changing stacking order 248 
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